题目

给定两个数组，判断两数组内容是否相等。

• 不使用排序


• 不考虑元素位置

例：

[1, 2, 3] 和 [1, 3, 2] // true

[1, 2, 3] 和 [1, 2, 4] // false

思考几秒：有了😀😀

1. 直接遍历✍

• 直接遍历第一个数组，并判断是否存在于在第二个数组中


• 求差集, 如果差集数组有长度，也说明两数组不等（个人感觉比上面的麻烦就不举例了）

const arr1 =  ["apple", "banana", 1]

const arr2 =  ["apple", 1, "banana"]



function fn(arr1, arr2) {

  // Arrary.some: 有一项不满足 返回false

  // Arrary.indexOf: 查到返回下标，查不到返回 -1

  if (arr1.length !== arr2.length) {

    return false;

  }

  return !arr1.some(item => arr2.indexOf(item)===-1)

}



fn(arr1,arr2) // true

• 细心的小伙伴就会发现：NaN 会有问题

const arr1 =  ["apple", "banana", NaN]

const arr2 =  ["apple", NaN, "banana"]



function fn(arr1, arr2) {

  if (arr1.length !== arr2.length) {

    return false;

  }

  return !arr1.some(item => arr2.indexOf(item)===-1)

}



fn(arr1,arr2) // false

Arrary.prototype.indexOf() 是使用的严格相等算法 => NaN值永远不相等

Array.prototype.includes() 是使用的零值相等算法 => NaN值视作相等

• 严格相等算法: 与 === 运算符使用的算法相同


• 零值相等不作为 JavaScript API 公开， -0和0 视作相等，NaN值视作相等，具体参考mdn文档:

• 使用includes

const arr1 =  ["apple", "banana", NaN]

const arr2 =  ["apple", NaN, "banana"]



function fn(arr1, arr2) {

  if (arr1.length !== arr2.length) {

    return false;

  }

  return !arr1.some(item => !arr2.includes(item))

}



fn(arr1,arr2) // true

使用includes 确实可以判断NaN了，如果数组元素有重复呢？

// 重复的元素都是banana

const array1 = ["apple", "banana", "cherry", "banana"];

const array2 = ["banana", "apple", "banana", "cherry"];

// 或者

// 一个重复的元素是banana， 一个是apple

const array1 = ["apple", "banana", "cherry", "banana"];

const array2 = ["banana", "apple", "apple", "cherry"];

由上可知：这种行不通，接下来看看是否能从给数组元素添加标识入手

2. 把重复元素标识编号✍

这个简单：数组 元素重复 转换成val1, val2

function areArraysContentEqual(arr1, arr2) {

  if (arr1.length !== arr2.length) {

    return false;

  }



  // 重复数组元素 加1、2、3

  const countArr1 = updateArray(arr1)

  const countArr2 = updateArray(arr2)



  /**

   * 

   * @param {*} arr 数组 元素重复 转换成val1, val2

   * @returns 

   */

  function updateArray(arr) {

    const countMap = new Map();

    const updatedArr = [];



    for (const item of arr) {

      if (!countMap.has(item)) {

        // 如果元素是第一次出现，直接添加到结果数组

        countMap.set(item, 0);

        updatedArr.push(item);

      } else {

        // 如果元素已经出现过，添加带有编号的新元素到结果数组

        const count = countMap.get(item) + 1;

        countMap.set(item, count);

        updatedArr.push(`${item}${count}`);

      }

    }

    return updatedArr;

  }

  const flag = countArr1.some(item => !countArr2.includes(item))

  return !flag

}



const array1 = ["apple", "banana", "cherry", "banana"];

const array2 = ["banana", "apple", "banana", "cherry"];



areArraysContentEqual(array1, array2) // true



// 其实这种存在漏洞的

const array3 = ["apple", "banana", "cherry", "banana", 1, '1', '1' ];

const array4 = ["banana", "apple", "banana", "cherry", '1', 1, 1];

// 应该是false

areArraysContentEqual(array3, array4) // true

因为把判断的 转为了字符串 updatedArr.push(${item}${count}) 所以出问题了

3. 统计元素次数(最终方案)✍

function areArraysContentEqual(arr1, arr2) {

  if (arr1.length !== arr2.length) {

    return false;

  }



  // 创建计数对象，用于记录每个元素在数组中的出现次数

  const countMap1 = count(arr1)

  const countMap2 = count(arr2)



  // 统计数组中的元素出现次数

  function count(arr = []) {

    const resMap = new Map();

    for (const item of arr) {

      resMap.set(item, (resMap.get(item) || 0) + 1);

    }

    return resMap

  }

  // 检查计数对象是否相等

  for (const [key, count] of countMap1) {

    if (countMap2.get(key) !== count) {

      return false;

    }

  }



  return true;

}



const array1 = ["apple", "banana", "cherry", "banana", 1, '1', '11', 11];

const array2 = ["banana", "apple", "banana", "cherry", '1', 1, '11', 11];



areArraysContentEqual(array1, array2) // true

注意事项

这个题需要注意：

• 先判断长度，长度不等 必然不等


• 元素可重复


• 边界情况考虑
  
  
  
  • '1' 和 1 (Object的key是字符串， Map的key没有限制)
  
  
  • NaN
  
  
  • null undefined
  
  
  
  

结语：

如果本文对你有收获，麻烦动动发财的小手，点点关注、点点赞！！！👻👻👻

因为收藏===会了

如果有不对、更好的方式实现、可以优化的地方欢迎在评论区指出，谢谢👾👾👾

变量

变量概述

数据类型

运算符

算数运算符

递增递减运算符

比较运算符

逻辑运算符

赋值运算符

运算符优先级

选择结构

流程控制（顺序，分支，循环）

小结

数组

函数

函数基本概念

arguments

函数声明方式

JavaScript作用域

预解析

sum(1)(2,3)(4,5,6) js的链式调用

function sum(){

let arr = Array.prototype.slice.call(arguments);

fn = function(){

    let arr1 = Array.prototype.slice.call(arguements)

    return sum.apply(null,arr.concat(arr1))

}

//`reduce()` 方法将数组缩减为单个值。

//`reduce()` 方法为数组的每个值（从左到右）执行提供的函数。

//函数的返回值存储在累加器中（结果/总计）。

//注释：对没有值的数组元素，不执行 `reduce()` 方法。

//注释：`reduce()` 方法不会改变原始数组。

   fn.toString = function(){

       return arr.reduce((value,n)=>{

           return value+n

       })

   }

   return fn

}

//柯里化的高级实现

function curry(func){

    return curried(...args){

        if(args.length >= func.length){

            return func.apply(this,args);

        }else{

            return function(...args2){

                return curried.apply(this,args.concat(args2))

            }

        }

    }

}

面试点

sum(1)(2)(3)怎么实现

面试的时候，面试官让我讲一个这个怎么实现
当时想到的是嵌套闭包，调用返回值，进行累加

//这个是我在其他文章上看到的代码

function sum(a){

    function add(b){

        a =a+b

        return add;

    }

    add.toString = function(){

    return a;

    }    

    return sum;

    

查询了一下，涉及到了一个知识点，函数柯里化

//正常的函数

function sum(a,b){

    var sum = 0;

    sum = a+ b;

    console.log(sum);

}



//柯里化函数

function curry(a){

    return function(b){

        console.log(a+b)

    }

}

const sum = curry(1);

// 这个过程分为三步

// step1：

// addCurry(1)

// 返回下面的函数

// ƒ (arg) {

// 	return judge(1, arg);

// }

// step2：

// addCurry(1)(2)

// 返回下面的函数

// ƒ (arg) {

// 	return judge(1,2, arg);

// }

// step3：

// addCurry(1)(2)(3)

// 返回并执行下面的函数

// return fn(1,2,3);

// 最终得到结果6

函数柯里化

把接收多个参数的函数变换成接受一个单一参数的函数，并且但会接收余下的采纳数并且返回结果的新函数的技术。eg:它是指将一个函数从可调用的 f(a, b, c) 转换为可调用的 f(a)(b)(c)

参数复用

用于正则表达式的检验

//记录思路

    柯里化检验函数curry 

    const check = curry(); 

    生成工具化函数，进行验证

    const checkphone = check(/'正则表达式'/)

    检验电话号码

    checkphone('122333232');

延迟计算

返回的函数都不会立即执行，而是等待调用（开发者调用）

动态生成函数

比如说，在dom结点中每每绑定一次事件，都需要对环境进行判断，再去绑定这个事件；将这个过程进行柯里化，在使用前进行一次判断

const addEvent = (function() {

	if (window.addEventListener) {

		return function(ele) {

			return function(type) {

				return function(fn) {

					return function(capture) {

						ele.addEventListener(type, (e) => fn.call(ele, e), capture);

					}

				}

			}

		}

	} else if (window.attachEvent) {

		return function(ele) {

			return function(type) {

				return function(fn) {

					return function(capture) {

						ele.addEventListener(type, (e) => fn.call(ele, e), capture);

					}

				}

			}

		}

	}

})();



// 调用

addEvent(document.getElementById('app'))('click')((e) => {console.log('click function has been call:', e);})(false);



// 分步骤调用会更加清晰

const ele = document.getElementById('app');

// get environment

const environment = addEvent(ele)

// bind event

environment('click')((e) => {console.log(e)})(false);

//来自于[一文搞懂Javascript中的函数柯里化（currying） - 知乎 (zhihu.com)](https://zhuanlan.zhihu.com/p/120735088)

柯里化函数后虽然代码比较冗长，但是它的适用性增加了

柯里化封装

eg : sum(1,2,3...)

    //函数柯里化封装（这个封装可以直接复制走使用）

    function curry(fn, args) {

            var length = fn.length;

            var args = args || [];

            return function () {

                newArgs = args.concat(Array.prototype.slice.call(arguments));

                if (newArgs.length < length) {

                    return curry.call(this, fn, newArgs);

                } else {

                    return fn.apply(this, newArgs);

                }

            }

        }

        

        //需要被柯里化的函数

        function multiFn(a, b, c) {

            return a * b * c;

        }

        

        //multi是柯里化之后的函数

        var multi = curry(multiFn);

        console.log(multi(2)(3)(4));

        console.log(multi(2, 3, 4));

        console.log(multi(2)(3, 4));

        console.log(multi(2, 3)(4));

        //转载自[Javascript高级篇之函数柯里化 - 掘金 (juejin.cn)](https://juejin.cn/post/7111902909796712455)

Function.prototype

四个方法：apply，bind，call，toString

Function.prototype.bind()

定义

bind() 方法创建一个新的函数，在 bind() 被调用时，这个新函数的 this 被指定为 bind() 的第一个参数，而其余参数将作为新函数的参数，供调用时使用。（MDN）

const module = {

  x: 42,

  getX: function () {

    return this.x;

  },

};



const unboundGetX = module.getX;

console.log(unboundGetX()); // The function gets invoked at the global scope

// Expected output: undefined



const boundGetX = unboundGetX.bind(module);

console.log(boundGetX());

// Expected output: 42

Function.prototype.apply()

function 的实例的apply（）方法会以给定的this值和作为数组（或类数组对象）提供arguments调用该函数

const numbers = [5, 6, 2, 3, 7];

const max = Math.max.apply(null, numbers);

console.log(max);

// Expected output: 7

const min = Math.min.apply(null, numbers);

console.log(min);

// Expected output: 2

语法

apply(thisArg) apply(thisArg, argsArray)

参数

//argsArray --- 用于指定调用func时的参数，或者如果不需要向函数提供参数，则为null或undefined



//thisArg --- 调用func 时提供的this值，如果函数不处于严格对象，则null 和undefined 会被替换成全局对象，原始值会被转换成对象

返回值

使用指定的this值和参数调用函数的结果

Function.prototype.call()

Function 实例的 call() 方法会以给定的 this 值和逐个提供的参数调用该函数

//示例

function Product(name, price) {

  this.name = name;

  this.price = price;

}



function Food(name, price) {

  Product.call(this, name, price);

  this.category = 'food';

}



console.log(new Food('cheese', 5).name);

// Expected output: "cheese"

//语法

call(thisArg)

call(thisArg, arg1)

call(thisArg, arg1, arg2)

call(thisArg, arg1, arg2, /* …, */ argN)

Function.prototype.toString()

Function 实例的 toString() 方法返回一个表示该函数源码的字符串。

function sum(a, b) {

  return a + b;

}



console.log(sum.toString());

// Expected output: "function sum(a, b) {

//                     return a + b;

//                   }"



console.log(Math.abs.toString());

// Expected output: "function abs() { [native code] }"

放一个JavaScript的链接

转载自：http://www.cnblogs.com/wangdan0915…

:is()

你是否曾经写过下方这样冗余的CSS选择器:

.active a,

.active button,

.active label {

  color: steelblue;

}

其实上面这段代码可以这样写：

.active :is(a, button, label) {

  color: steelblue;

}

看~是不是简洁了很多！

是的，你可以使用 :is() 对选择器的任何部分进行分组，例如，你可以对如下代码：

.section h2,

.aside h2,

.nav h2 {

  color: steelblue;

}

进行转换：

:is(.section, .aside, .nav) h2 {

  color: steelblue;

}

但是 :is() 不仅对父选择器和子选择器有用，它也可以选择多个相邻的选择器，比如:

button:is(:focus, :hover, :active) {

  color: steelblue;

}



button:is(.active, .pressed) {

  color: lightsteelblue;

}

上述代码等价于：

button:focus, button:hover, button:active {

  color: steelblue;

}



button.active, button.pressed {

  color: lightsteelblue;

}

:where()

:where() 是一个与 :is() 非常相似的伪类，也值得注意。它们看起来非常相似:

:where(.section, .aside, .nav) h2 {

  color: steelblue;

}

但区别在于 :where 的权重为 0，而:is() 总是会采用列表中最特高的选择器的权重。例如，你知道下面的 CSS 代码中的按钮是什么颜色吗?

:is(html) button {

  color: red;

}



:where(html) button {

  color: blue;

}

在上面的例子中，虽然以 :where() 开头的块在以 :is() 开头的块下面，但 :is() 块具有更高的权重。

:has()

一个相关但非常不同的伪类是:has()。:has() 允许选择包含匹配选择器(或选择器集)的子元素的父元素。

:has() 的一个示例是不显示下划线的情况下包含图像或视频的链接:

a { text-decoration: underline }



/* 链接有下划线，除非它们包含图像或视频 */

a:has(img, video) {

  text-decoration: none;

}

现在，如果默认情况下我们的 a 标记有下划线文本，但其中有图像或视频，则任何匹配的锚元素的下划线将被删除。

你也可以结合 :is() 使用：

:is(a, button):has(img, video) {

  text-decoration: none;

}

我们还需要预处理器吗?

现在你可能会说“SCSS可以做到这一点!，你甚至可能更喜欢它的语法:

.active {

  button, label, a {

    color: steelblue;

  }

}

说的没错，这很优雅。但是，CSS 似乎现在已经都能获取到我们曾经需要SCSS(或其他预处理器)才能获得的特性。

CSS 变量也是 CSS 本身的另一个不可思议的补充，它回避了一个问题：就是什么时候或者多久你真的需要预处理程序:

.active :is(a, button, label) {

  --color: steelblue;

  color: var(--steelblue);

}

这并不是说预处理器没有它们的用例和优点。

但我认为在某个时间点上，它们确实是处理任何重要CSS的强制要求，而现在情况不再如此了。

惊喜

我想说的是，CSS的未来仍然是光明的。CSS 工作组正积极致力于直接向CSS中添加嵌套选择器。他们正在积极地在3种可能的语法之间进行选择:

/* 1 */

article {

  font-family: avenir;

  & aside {

    font-size: 1rem;

  }

}



/* 2 */

article {

  font-family: avenir;

} {

  aside {

    font-size: 1rem;

  }

}



/* 3 */

@nest article {

  & {

    font-family: avenir;

  }

  aside {

    font-size: 1rem;

  }

}

你最喜欢哪一个?

庆幸的是，第 1 种已经被官方采纳！所以我们可能很快就会看到一个非常像 scss 的嵌套语法。

浏览器支持

目前所有主流浏览器都支持 :is() 和 :where() 伪类:

但是，需要注意，我们在这里提到的 :has() 伪类没有相同级别的支持，所以使用 :has() 时要小心:

前言

大家好，我是林三心，用最通俗易懂的话讲最难的知识点是我的座右铭，基础是进阶的前提是我的初心。

大家设想一下，如果有一个超级大的表单页面，用户好不容易填完了，然后点击提交，这个时候请求接口居然返回401，然后跳转到登录页。。。那用户心里肯定是一万个草泥马~~~

所以项目里实现token无感知刷新是很有必要的~

这几天在项目中实践了一套token无感知刷新的方案，其实也有看了一下网上那些解决方案，也知道这类的方案已经烂大街了，但是感觉不太符合我想要的效果，主要体现在以下几个方面：

• 逻辑都写拦截器里，耦合性高，不太好


• 接口重试的机制做的不太好


• 接口并发时的逻辑处理做的不太好

我为什么不想要让这套逻辑耦合在拦截器里呢？一方面是因为，我想要写一套代码，在很多的项目里面可以用，把代码侵入性降到最低

另一方面，因为我觉得token无感知刷新涉及到了接口重发，我理解是接口维度的，不应该把这套逻辑放在响应拦截器里去做。。我理解重发之后就是一个独立的新接口请求了，不想让两个独立的接口请求相互有交集~

所以我还是决定自己写一套方案，并分享给大家，希望大家可以提提意见啥的，共同进步~

温馨提示：需要有一些Promise基础

思路

其实大体思路是一样的，只不过实现可能有差别~就是需要有两个 token

• accessToken：普通 token，时效短


• refreshToken：刷新 token，时效长

accessToken用来充当接口请求的令牌，当accessToken过期时效的时候，会使用refreshToken去请求后端，重新获取一个有效的accessToken，然后让接口重新发起请求，从而达到用户无感知 token 刷新的效果

具体分为几步：

• 1、登录时，拿到accessToken和refreshToken，并存起来


• 2、请求接口时，带着accessToken去请求


• 3、如果accessToken过期失效了，后端会返回401


• 4、401时，前端会使用refreshToken去请求后端再给一个有效的accessToken


• 5、重新拿到有效的accessToken后，将刚刚的请求重新发起


• 6、重复1/2/3/4/5

有人会问：那如果refreshToken也过期了呢？

好问题，如果refreshToken也过期了，那就真的过期了，就只能乖乖跳转到登录页了~

Nodejs 模拟 token

为了方便给大家演示，我用 express 模拟了后端的 token 缓存与获取，代码如下图（文末有完整代码）由于这里只是演示作用，所以我设置了

• accessToken：10秒失效


• refreshToken：30秒失效

前端模拟请求

先创建一个constants.ts来储存一些常量（文末有完整源码)

接着我们需要对axios进行简单封装，并且模拟：

• 模拟登录之后获取双 token 并存储


• 模拟10s后accessToken失效了


• 模拟30s后refreshToken失效了

理想状态下，用户无感知的话，那么控制台应该会打印

test-1

test-2

test-3

test-4

打印test-1、test-2比较好理解

打印test-3、test-4是因为虽然accessToken失效了，但我用refreshToken去重新获取有效的accessToken，然后重新发起3、4的请求，所以会照常打印test-3、test-4

不会打印test-5、test-6是因为此时refreshToken已经过期了，所以这个时候双token都过期了，任何请求都不会成功了~

但是我们看到现状是，只打印了test-1、test-2

不急，我们接下来就实现token无感知刷新这个功能~

实现

我的期望是封装一个class，这个类提供了以下几个功能：

• 1、能带着refreshToken去获取新accessToken


• 2、不跟axios的拦截器耦合


• 3、当获取到新accessToken时，可以重新发起刚刚失败了的请求，无缝衔接，达到无感知的效果


• 4、当有多个请求并发时，要做好拦截，不要让多次去获取accessToken

针对这几点我做了以下这些事情：

• 1、类提供一个方法，可以发起请求，带着refreshToken去获取新accessToken


• 2、提供一个wrapper高阶函数，对每一个请求进行额外处理


• 3/4、维护一个promise，这个promise只有在请求到新accessToken时才会fulfilled

并且这个类还需要支持配置化，能传入以下参数：

• baseUrl：基础url


• url：请求新accessToken的url


• getRefreshToken：获取refreshToken的函数


• unauthorizedCode：无权限的状态码，默认 401


• onSuccess：获取新accessToken成功后的回调


• onError：获取新accessToken失败后的回调

以下是代码（文末有完整源码）

使用示例如下

最后实现了最终效果，打印出了这四个文本

完整代码

constants.ts

// constants.ts



// localStorage 存储的 key

export const LOCAL_ACCESS_KEY = 'access_token';

export const LOCAL_REFRESH_KEY = 'refresh_token';



// 请求的baseUrl

export const BASE_URL = 'http://localhost:8888';

// 路径

export const LOGIN_URL = '/login';

export const TEST_URL = '/test';

export const FETCH_TOKEN_URL = '/token';

retry.ts

// retry.ts



import { Axios } from 'axios';



export class AxiosRetry {

  // 维护一个promise

  private fetchNewTokenPromise: Promise<any> | null = null;



  // 一些必须的配置

  private baseUrl: string;

  private url: string;

  private getRefreshToken: () => string | null;

  private unauthorizedCode: string | number;

  private onSuccess: (res: any) => any;

  private onError: () => any;



  constructor({

    baseUrl,

    url,

    getRefreshToken,

    unauthorizedCode = 401,

    onSuccess,

    onError,

  }: {

    baseUrl: string;

    url: string;

    getRefreshToken: () => string | null;

    unauthorizedCode?: number | string;

    onSuccess: (res: any) => any;

    onError: () => any;

  }) {

    this.baseUrl = baseUrl;

    this.url = url;

    this.getRefreshToken = getRefreshToken;

    this.unauthorizedCode = unauthorizedCode;

    this.onSuccess = onSuccess;

    this.onError = onError;

  }



  requestWrapper<T>(request: () => Promise<T>): Promise<T> {

    return new Promise((resolve, reject) => {

      // 先把请求函数保存下来

      const requestFn = request;

      return request()

        .then(resolve)

        .catch(err => {

          if (err?.status === this.unauthorizedCode && !(err?.config?.url === this.url)) {

            if (!this.fetchNewTokenPromise) {

              this.fetchNewTokenPromise = this.fetchNewToken();

            }

            this.fetchNewTokenPromise

              .then(() => {

                // 获取token成功后，重新执行请求

                requestFn().then(resolve).catch(reject);

              })

              .finally(() => {

                // 置空

                this.fetchNewTokenPromise = null;

              });

          } else {

            reject(err);

          }

        });

    });

  }



  // 获取token的函数

  fetchNewToken() {

    return new Axios({

      baseURL: this.baseUrl,

    })

      .get(this.url, {

        headers: {

          Authorization: this.getRefreshToken(),

        },

      })

      .then(this.onSuccess)

      .catch(() => {

        this.onError();

        return Promise.reject();

      });

  }

}

index.ts

import { Axios } from 'axios';

import {

  LOCAL_ACCESS_KEY,

  LOCAL_REFRESH_KEY,

  BASE_URL,

  LOGIN_URL,

  TEST_URL,

  FETCH_TOKEN_URL,

} from './constants';

import { AxiosRetry } from './retry';



const axios = new Axios({

  baseURL: 'http://localhost:8888',

});



axios.interceptors.request.use(config => {

  const url = config.url;

  if (url !== 'login') {

    config.headers.Authorization = localStorage.getItem(LOCAL_ACCESS_KEY);

  }

  return config;

});



axios.interceptors.response.use(res => {

  if (res.status !== 200) {

    return Promise.reject(res);

  }

  return JSON.parse(res.data);

});



const axiosRetry = new AxiosRetry({

  baseUrl: BASE_URL,

  url: FETCH_TOKEN_URL,

  unauthorizedCode: 401,

  getRefreshToken: () => localStorage.getItem(LOCAL_REFRESH_KEY),

  onSuccess: res => {

    const accessToken = JSON.parse(res.data).accessToken;

    localStorage.setItem(LOCAL_ACCESS_KEY, accessToken);

  },

  onError: () => {

    console.log('refreshToken 过期了，乖乖去登录页');

  },

});



const get = (url, options?) => {

  return axiosRetry.requestWrapper(() => axios.get(url, options));

};



const post = (url, options?) => {

  return axiosRetry.requestWrapper(() => axios.post(url, options));

};



const login = (): any => {

  return post(LOGIN_URL);

};

const test = (): any => {

  return get(TEST_URL);

};



// 模拟页面函数

const doing = async () => {

  // 模拟登录

  const loginRes = await login();

  localStorage.setItem(LOCAL_ACCESS_KEY, loginRes.accessToken);

  localStorage.setItem(LOCAL_REFRESH_KEY, loginRes.refreshToken);



  // 模拟10s内请求

  test().then(res => console.log(`${res.name}-1`));

  test().then(res => console.log(`${res.name}-2`));



  // 模拟10s后请求，accessToken失效

  setTimeout(() => {

    test().then(res => console.log(`${res.name}-3`));

    test().then(res => console.log(`${res.name}-4`));

  }, 10000);



  // 模拟30s后请求，refreshToken失效

  setTimeout(() => {

    test().then(res => console.log(`${res.name}-5`));

    test().then(res => console.log(`${res.name}-6`));

  }, 30000);

};



// 执行函数

doing();

结语 & 加学习群 & 摸鱼群

我是林三心

• 一个待过小型toG型外包公司、大型外包公司、小公司、潜力型创业公司、大公司的作死型前端选手；


• 一个偏前端的全干工程师；


• 一个不正经的掘金作者；


• 一个逗比的B站up主；


• 一个不帅的小红书博主；


• 一个喜欢打铁的篮球菜鸟；


• 一个喜欢历史的乏味少年；


• 一个喜欢rap的五音不全弱鸡

如果你想一起学习前端，一起摸鱼，一起研究简历优化，一起研究面试进步，一起交流历史音乐篮球rap，可以来俺的摸鱼学习群哈哈，点这个，有7000多名前端小伙伴在等着一起学习哦 --> 摸鱼沸点

作者：Sunshine_Lin

链接：juejin.cn/post/728169…

来源：稀土掘金

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

① 自动打断点（抛异常时自动断点）

偶然一次可能不小心打开某个设置选项，可能设置了英文又不知道是打开了什么，只知道当每次打开F11打开控制台调试看数据的时候，就是不会自动停在某个位置，又不知道怎么停掉，怀疑会不会是安装了什么谷歌插件或者是油猴哪个脚本代码写错写了什么。

不小心打钩了断点调试的遇到未捕获的异常时暂停，或者在遇到异常时暂停这两个选项其中一个。就有可能导致了谷歌的调试器暂停，取决于这个网站有没有一些异常触发到这一点，勾选上每次异常浏览器会帮我们打断点。

所以解决办法就是把谷歌浏览器中的这两个勾去掉，如果不是你本意打开想要调试网站中一些异常的报错。

② 一键重发请求（不用每次重新请求就刷新页面）

排查接口的时候，需要重新请求该接口，不必要每次重新刷新页面去请求试接口里面传参对不对返回来的数据对不对。重发请求很简单，右击该接口重发xhr即可。

③ 断点调试+debugger+console+try...catch

(1) console.log

找bug解决bug是很重要滴。console.log-输出某个变量值是非常非常常用的，只要做码农一定得会各种语言的输出消息和变量的语句，方便我们查看和调试。

(2) debugger（不用每次都console）

在代码某个语句后面或者前面输debugger

在我入行到在学校生涯那段时间都不知道debugger;这玩意，有一次项目有一个比较棘手不知道怎么解决的问题，甲方公司项目负责人开会重点讲了那个问题，就见他这里输一下dubugger，那里输一个debugger，当时就觉得那玩意很神（反正意识上只要我们不懂的东西刚开始接触都是这样，这里神那里神的，接触久了就觉的也就那样不过如此，很平常），最后也没看出什么来。

debugger就是在某个状态下，用这个debugger;语句在那里断一下点，然后当下，上下文的状态和值都可以在查看，哪个分支导致变量状态错误。

使用debugger可以查看:

• 作用域变量


• 函数参数


• 函数调用堆栈


• 代码整个执行过程（从哪一句到哪一句的）


• 如果是异步promise async...await 等这种的话就需要在then和catch里面debugger去调试

(3) try...catch 捕获异常

try {

    // 可能会抛出异常的代码

} catch {

    // 处理所有异常的代码

}

用try...catch捕获异常，包括运行时错误和自定义以及语法错误。

在try...catch中还可以在某些情况下用throw在代码中主动抛出异常。

try {

    // 可能会抛出异常的代码

    

    if (某某情况下) throw '某某错误提示信息'

    

} catch {

    // 处理所有异常的代码

} finally {

    // 结束处理用于清理操作

}

④ 联调查看接口数据

如上图这个接口，如果想要复制接口preview里面的数据，

除了去Responese里面去找我们需要的某个值去选择复制之外（这个有个缺点就是要找值不直观），还可以右击某个值，然后通过点击store object as global variable(存储为全局变量) 获取。

当我们点击了之后，控制台就会出现tempXX这个变量。

我们就只需要在控制台输入copy(temp3)copy(要复制的json名)，在粘贴板上就有这个json数据了。

💡
全局方法copy()在console里copy任何你能拿到的数据资源。

⑤ 后端接口数据返回json

这个有时候有的同学有可能碰到类似这种的JSON数据{\"name\":\"John\",\"address\":\"123 Main St, City\"}

解决方法

直接打开控制台console，输入 JSON.parse("{"name":"John","address":"123 Main St, City"}")，这样

如果你想复制下来用，直接跟上面我们用copy这好碰上，赋值加上一个copy就可以了。

这样这个值就在粘贴板上了。

总结

报错和bug，多多少少会贯穿我们的职业生涯中，如何定位问题、解决问题，加以调试，是我们必须也是不能不必备的技能。

☎️ 希望对大家有所帮助，如有错误，望不吝赐教，欢迎评论区留言互相学习。

最近遇到一个问题，计算滚动距离，滚动比例达到某界定值时，显示mask，很常见吧^ _ ^

这里讲的不是这个需求的实现，是其中遇到了一个比较有意思的bug，靠这个bug才达到了正确效果，以及这个bug是如何暴露的（很重要）。

下面是演示代码和动图

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        .container {

            width: 300px;

            max-height: 300px;

            background-color: black;

            position: absolute;

            top: 60px;

            left: 50%;

            transform: translateX(-50%);

            overflow-y: auto;

        }

        .child {

            width: 260px;

            height: 600px;

            margin: 0px 20px;

            background-color: pink;

            position: relative;

        }

        .flag {

            position: absolute;

            width: 100%;

            height: 25px;

            background-color: blueviolet;

            color: aliceblue;

            text-align: center;

            line-height: 25px;

            font-size: 14px;

            left: 0;

            right: 0;

        }

        .top {

            top: 0;

        }

        .bottom {

            bottom: 0px;

        }

    </style>

</head>



<body>

    <div class="container">

        <div class="child">

            <div class="flag top">top</div>

            <div class="flag bottom">bottom</div>

        </div>

    </div>

</body>

</html>

开始计算啦，公式：滚动比例 = 滚动距离 / 可滚动距离

滚动距离: $0.scrollTop

可滚动距离: $0.scrollHeight - $0.offsetHeight

即：scrollRatio = scrollTop / (scrollHeight - offsetHeight)

滚动到底部，计算结果是 300 / (600 - 300) = 1

我们需要拿scrollRatio和某界定值（比如0.1）作大小的比较，计算是true还是false（用isShow = scrollRatio < 某界定值来保存）。

这里一切正常。

不正常的情况出现了

就是没有出现滚动条的情况，即.child的高度没有超过.container的高度时，把.child的高度设成.container的max-height，就没有滚动条了（下面讲的情景也都是没有滚动条的情况）。

这个时候再去计算，得到了NaN，以至于 NaN < 0.1 = false。

因为isShow的预期就是false，所以一直都没有发现这个bug。

那么它是如何暴露的呢？

后来新的需求给.container加了border。演示一下加border，然后再去计算：

发现没，这时候$0.offsetHeight的高度把border的高度也算进去了，结果就成了true，这不是想要的结果 ❌。

然后就是一番查验

offsetHeight是一个元素的总高度，包括可见内容的高度、内边距（padding）、滚动条的高度（如果存在）以及边框（border）的高度。

而我们这里只需要可见的高度，就可以用到另一个属性了clientHeight。

clientHeight是指元素的可见内容区域的高度，不包括滚动条的高度和边框的高度。它仅包括元素的内部空间，即内容加上内边距。

当然这也只是继续使除数为0，然后得到结果为NaN，不过bug已经暴露出来了，后面就是一些其他的优化啦～

总结 + 复习（盒模型 box-sizing）

发现没有，offsetHeight和clientHeight的区别，就像盒模型中的标准盒模型和怪异盒模型的区别:

box-sizing: content-box(默认，标准盒模型)：宽度和高度的计算值都 不包含 内容的边框（border）和内边距（padding）。添加padding和border时， 会 使整个div的宽高变大。

box-sizing: border-box（怪异盒模型）：宽度和高度的计算值都 包含 内容的边框（border）和内边距（padding）。添加padding和border时， 不会 使整个div的宽高变大。

这样讲是不是加深一下对这两种属性的印象

^ - ^

在此之前我是自由职业者，满打满算一年空窗期，在被动收入不稳定，心想还是需要一份收入来维持日常生活开销，再去考虑打造自己的额外收入。

前前后后从准备到上岸历时一个半月，今天从三个方面分享这个过程我做了什么？

心态

做事情之前，心态很重要，我遇事很少否定自己，在我看来，别人可以做到的，自己也可以，虽然一年空窗，基本上不接触技术，写代码量远不如以前，但又不是要上天或者造原子弹，取决于谁执行力强，谁付出的时间多，仅此而已。

换作以前，相信大部分的同学去找半个月都可以入职自己期望的岗位，看了一下网上的情绪，行情在这个环境下的确蛮消极的，很多人找了几个月都没有上岸的，当然我自己也有感受到，简历丢出去之后没有声音，并且在各大招聘网站上坑位也减少了，相比两三年前如日中天的行情，难免会有这类情绪。

但我没有那么焦虑，为什么呢？其一是我心态比较好，其二是跟我的定位有关。

定位

第一个是我要找的岗位定位为中高级开发，而这类人在市场上来看一直都是稀缺资源，其他行业也如此。

第二个是薪酬范围定位在20k-25k范围，给不到我会觉得工作没劲，累点没关系，主要还是相信自己可以胜任。

第三个是前期投几个低于期望值的试试水，了解一下目前行情顺便找找感觉。

所以，接下来我只需要把目标定位在寻找中高级开发岗位即可，完善自己达到这个能力要求，下面是行动计划，细看下来你会发现这又是个PDCA。

计划

我把计划分为这几个模块：

1. 简历优化

我一开始是不会写简历的，因为中间没有跳过槽，也没定时更新，所以就随便拿了以前的模板改了改时间和项目就开始投了，简历回复少不说，即使有机会面试了也没有把简历提到的讲清楚，结果可想而知。

后面想想不行，虽然没写过，但是我会看简历啊，之前带团队有时候一天要看上百份简历，大概知道面试官青睐哪些人才，优化之后断断续续才有面试。

其次是我在面试过程结束时问面试官哪些地方还需要提升的，不少也会反馈简历问题，诸如：

• 管理工作内容太笼统了，看不出具体做了什么


• 没有说清楚空窗期做了什么


• 没有体现出你在项目中做了什么


• ......

知道自己问题之后，前后迭代了大概十几个版本，越到后面的质量越高，直至我入职之后，还有一个目标企业发来邀请。

2. 技能要求

前端领域涉及到这么多技能，需要有方向进行准备，分享一下我是如何分类：

基础：

• 前端三大件：HTML、CSS、JS


• 主流框架：Vue2/Vue3、React


• 状态管理：Vuex、redux、mobox


• 构建工具：webpack、Vue-cli、Vite、gulp


• 前端安全：xss、csrf、cors 常见问题和防御措施

进阶：

• JS运行机制、事件轮询机制、浏览器运行原理


• 前端性能监控、前端异常监控如何做？


• 前端工程化体系包含哪些


• 前端性能优化手段：页面性能、构建性能、代码性能


• Vue、React核心原理


• 基础算法数据结构


• Http协议

面对上面的技术基础类，主要是刷官方文档+常见面试题，这些更多是概念性的东西，在这里就不多说了，相信大家手上多少都有八股文资料，如果没有可以私信我。

而面对进阶类，首先总结自己项目中用到了哪些，吃透它。其次，面对不太熟悉的板块如HTTP网络，我会通过专栏学习或者一些讲得好的课程来弥补。

除了上面的方法，还有一种我常用的技巧来覆盖知识盲区，就是下面要说的模拟面试，几乎适用于任何技能面试。

3. 模拟面试

这里要说的模拟面试并不是找一些大佬一对一模拟训练，而是换位思考（当然能够模拟面试效果更好啦~）。

即把自己想象成面试官，在考察某一个知识点的时候，你会问自己什么问题呢？

举2个栗子🌰

对于用Vue的同学，我会问：

• vue diff 与 react diff有什么区别？


• 为什么v-for中建议带:key，有什么情况下是可以不带的？


• 写过组件或者插件吗，有什么注意点？


• vue-router原理是什么

结合一些热门的话题，我会问：

• vue2与vue3对比，你觉得主要区别是什么？


• vue2与vue3在性能优化做了什么？两者的构建产物有什么区别？


• 如果你去学vue3，你会从哪里开始，怎么学？

除了以上我给自己虚构的问题之外，还有诸如vue生命周期啊、组件通信啊等等基础肯定是要会的，我会刷文档或虚构题目，这些比较简单，搞懂就行了。

对于设计模式，我也问了自己几个问题：

• 你知道的设计模式有哪些，知道他们的应用场景吗（解决了什么问题）？


• 在工作中用到的设计模式有哪些？说说它们的优劣势


• Vue中用了哪些设计模式?


• 观察者和发布订阅有什么不同？

基本上这个薪酬范围的设计模式，搞懂了以上问题大差不差。

再来说说这种方式有什么优势？

首先，问题是通过我们自身思考提出并主动寻求解决的，这本身已经存在闭环了，有利于我们理解一个知识点。其次，我们思考提出某个问题，意味着大脑🧠的神经元网络中有存在某些游离神经节点，它没有被连接到一起，随着提出并解决的问题越多，连接起来的网络就越大，这就形成了所谓的知识网络，相比没有目的刷题，它的持久性更强，更能抗遗忘。

总结

结束之前，再分享面试过程中的一个小插曲，当时面了一家小企业，终面的时候面试官问我期望薪酬，就报了18k，但是面试官说给不到，17k考不考虑？我当时没有回绝，就说回去考虑一下。

回去考虑一番之后，我根据当时岗位给到的薪资范围，加上当时家里事情比较多，想先稳定下来再考虑其他的，打算接了这个offer准备上班，突然闹了个乌龙，HR说老板那边重新定了价，只能给到16k，我说还能这么操作？这不明摆着欺负老实人嘛？

想了想如果接了这个offer，岂不是比之前离职时更低，更别说对比以前的同事了。心里忍不下这口气，以至于那两周，每天都撸到一点钟，功夫不负有心人，最后顺利上岸了！

分享几点个人觉得比较关键的：

• 永远相信自己，心态很重要，不仅仅面试，它贯穿人的一生


• 简历真实，不玩心思，例如空窗期这种，如实说明


• 吃透简历内容，不留疑点


• 面试过程中不着急回答问题，可以先澄清问题动机，不要为了回答而拼凑答案


• 前面几次不通过没关系，但一次要比一次好

以至于如何备战高级开发，等我升级了再来分享~

最后，祝愿所有航海者都能够顺利靠岸！！！

注：由于最近比较多朋友私信我咨询简历优化建议或者八股文，可以加我的微信followJavaScript，丢简历过来即可，备注“掘金”。

前言

最近，政府为了刺激消费，发放了大量的消费券，大家应该参与了抢券大军吧。但是如果你是一个前端程序员，你有没有想过，这个消费券样式我能实现吗？今天给大家分享一下，常用的票券的样式实现。

抽象一下

对我们常用的票券进行抽象后，大概就是下面几种样式了，我们来看看怎么实现吧

实现方案

对于内凹圆角或者镂空的这类样式，我们一般实现方案是使用mask(遮罩)；mask语法很简单，我们就当成background来用就好了，可以是PNG图片、SVG图片、也可以是渐变绘制的图片，同时也支持多图片叠加。然后我们了解一下他的遮罩原理：最终效果只显示不透明的部分，透明部分将不可见，半透明类推。

<1>实现一个内凹圆角

class="content">
 

.content {     

   width: 300px;     

   height: 150px;     

   margin: auto;     

   -webkit-mask: radial-gradient(circle at left center, transparent 20px, red 0);     

   background: red; } 

   ellipse

当前（2016.10.19）mask 处于 候选标准阶段（CR），还不是正式标准（REC），webkit/blink 内核加前缀 -webkit- 可使用。

<2>实现两个内凹圆角之遮罩合成

  .content{           

    width:300px;           

    height:150px;           

    background:red ;           

   -webkit-mask:radial-gradient(circle at left center,transparent 20px,red 20px)  ,     radial-gradient(circle at right center,transparent 20px,red 20px) ;           

    }

上面的写法是没有效果的，此时使用为两个重合后，整个区域都是不透明的，导致没有效果，这个时候我们需要使用遮罩合成；我们通过ps了解一下遮罩合成

遮罩合成mask-composite

-webkit-mask-composite: destination-in; /只显示重合的地方/

<3>实现两个内凹圆角之平铺

 .content{           

         width:300px;           

         height:150px;           

         background:red ;           

          -webkit-mask:radial-gradient(circle at 20px center,transparent 20px,red 20px);           

         -webkit-mask-position: -20px;       

}

<4>实现四个内凹圆角

 .content{           

       width:300px;           

       height:150px;           

       background:red ;           

       -webkit-mask:radial-gradient(circle at 20px 20px,transparent 20px,red 20px);           

      -webkit-mask-position: -20px -20px;       

}

<5>实现六个内凹圆角

 .content{           

     width:300px;           

     height:150px;           

     background:red ;           

     -webkit-mask:radial-gradient(circle at 20px 20px,transparent 20px,red 20px);           

     -webkit-mask-position: -20px -20px;           

     -webkit-mask-size:50% 100%;       

}

<6>实现中间一排的镂空

.content{           

       width:300px;           

       height:150px;           

       background:red;           

        -webkit-mask:           

            radial-gradient(circle at 20px 20px,transparent 20px,red 20px) -20px -20px/50% 100% ,           

            radial-gradient(circle at center 5px,transparent 5px,red 5px) 0px -5px/100% 30px;           

      -webkit-mask-composite: destination-in;        }

<7>实现两边多个内凹圆角

其实很简单:只需把遮罩的高度，变小，让他们平铺就可以了

 .content{           

       width:300px;           

      height:150px;           

       background:red ;           

      -webkit-mask:radial-gradient(circle at 10px 10px,transparent 10px,red 10px);           

     -webkit-mask-position: -10px 5px;           

     -webkit-mask-size:100% 30px;       

}

引言

事情起源还得从一个需求讲起, 需求内容如下:

1. 假设有串字符串如下:

const str = `Pharmaceuticals progress events.



JSON output:

{

  "name": "moyuanjun",

  "age": 28

}`

2. 现需要从字符串中, 提取到 JSON output: 后面的所有字符串, 后面还需要将其解析为对象(当然这不是本文的重点)

需求本身很简单, 实现起来也容易, 具体方案如下, 那么请问以下实现方法有啥问题呢?

const jsonStr = str.replace(/^(\s|\S|.)*?JSON output:/, '')

由于字符串是 gpt 返回的, 它是不可控的, 这里当字符串为 No, this text is not a transaction event. Therefore, the requested entities cannot be extracted. 时, 通过上文的正则进行匹配时就会导致页面卡住, 这里如果大家好奇的话, 可以尝试将下面代码复制到 浏览器控制台 并执行

'No, this text is not a transaction event. Therefore, the requested entities cannot be extracted.'.replace(/^(\s|\S|.)*?JSON output:/, '')

上面主要问题还是出在正则上, 执行上面正则匹配, 会陷入 回溯 陷阱, 我们可以看下上面正则在 regex101 的测试结果, 从测试结果来看正则的匹配次数是有点夸张的

下面我们来针对 回溯 问题进行展开....

一、正则引擎

传统正则引擎分为 NFA (非确定性有限状态自动机) 和 DFA(确定性有限状态自动机), 那么, 什么是确定型、非确定型、有限状态以及自动机呢?

确定型与非确定型: 假设有一个字符串 abc 需要匹配, 在没有编写正则表达式的前提下, 就能够确定 字符匹配顺序 的就是确定型, 不能确定字符匹配顺序的则为非确定型

有限状态: 所谓有限, 指的是在有限次数内能够得到结果

自动机: 自动机即自动完成, 在我们设置好匹配规则后由引擎自动完成, 不需要人为干预即为自动

根据上面的解释我们可得知 NFA 引擎和 DFA 引擎的主要区别就在于: 在没有编写正则表达式的前提下, 是否能确定字符执行顺序;, 下面我们来简单介绍下这两种引擎:

1.1 NFA 引擎

NFA(Nondeterministic finite automaton)又名 非确定性有限状态自动机, 主要特点如下:

1. 
   

   表达式驱动: 由要执行的正则表达式进行驱动的算法, 正则引擎从正则表达式起始位置开始, 尝试与文本进行匹配, 如果匹配成功, 都前进一步, 否则文本一直前进到下一个字符, 直到匹配成功

   
   


2. 
   

   会记录位置: 当正则表达式需要进行选择时, 它会 选择 一个 路径 进行匹配, 同时会 记录 当前的 位置, 如果选择的路径匹配不成功则需要回退回去, 重新选择一个路径进行尝试, 直到匹配完成, 如果所有可能情况全部匹配不成功, 则本次匹配失败

   
   


3. 
   

   单个字符可能会检查多次: 从👆🏻可以看出, 字符串中一个字符可能会被多次匹配到, 因为当一条正则路径不通时, 会进行回退

   
   


4. 
   

   支持零宽断言: 因为具有回退功能, 所以可以很容易实现零宽、断言、捕获、反向引用等功能

   
   

最后借用 猪哥 制作的一个小动画, 方便大家理解:

1.2 DFA

DFA(Deterministic finite automaton) 又名 确定性有限自动机, 主要特点如下:

1. 
   

   文本驱动: 由要搜索的文本驱动的算法, 文本中的每个字符 DFA 引擎只会查看一次, 简单理解就是对字符串进行一次循环, 每次循环都和正则进行一次匹配, 匹配成功字符串和正则指针都相应的向下移动

   
   


2. 
   

   DFA 引擎会记得所有的匹配可能, 并且每次匹配都会返回其中 最长的匹配, 这么做的目的是为了让后面的匹配能够更加轻松, 正因为如此字符串 nfa not 在 (nfa|nfa not) 中匹配结果为: nfa not

   
   


3. 
   

   优点: 优点很明显, 由于只会会循环一直字符串、并且会提前记住所有可能情况, 所以相对来说匹配效率是很高的

   
   


4. 
   

   缺点:

   
   

• 它始终将返回最长匹配结果, 无法控制表达式来改变这个规则


• 因为需要记住所以可能情况, 所以正则表达式预编译时间会更长, 占用更多内存


• 没有回退, 所有重复的运算符 都是贪婪 的, 会尽可能匹配更多的内容


• 因为不存在回退, 所以自然不支持零宽断言、捕获、反向引用等功能

最后借用 猪哥 制作的一个小动画, 方便大家理解:

补充说明: 上面只是对传统的两个正则引擎进行简单介绍, 在 JS 中正则引擎使用的则是 NFA 下面我们也只是对 JS 中的正则、以及 回溯 进行简单介绍, 同时在 regex101 中我们选用的语言则是 PHP, 主要是因为在 PHP 用的也是 NFA 引擎并且在 regex101 下会多一个 Regex Debugger 功能(不知道为什么 JS 没有 😭)

二、回溯

我们知道, NFA 引擎是用表达式去匹配文本, 而表达式又有若干 分支 和 范围, 一个分支或者范围匹配失败并不意味着最终匹配失败, 正则引擎会进行回退去尝试 下一个 分支或者范围, 这种行为就被称之为 回溯

类比于迷宫, 想象一下, 面前有两条路, 我们选择了一条, 走到尽头发现是条死路, 只好原路返回尝试另一条路, 则这个原路返回的过程就被称之为 回溯, 它在正则中的含义是 吐出已经匹配过的文本, 同时 正则匹配位置也会进行回退

一般的, NFA,如果匹配失败, 会尝试进行 回溯, 因为它并不知道后面还有没有可能匹配成功, 他是蒙在鼓里的, 但是 DFA 从一开始就知道所有的可能匹配, 因为在预编译时就它就已经存储了所以可能情况, 所以正则编写的好坏对 NFA 来说是特别的重要的

引擎会真正按照正则表达式进行匹配, 让你选择达到完全匹配所需的每个步骤, 所以我们必须很谨慎地告诉它, 首先检查哪种选择才能达到您的期望, 你也有机会调整正则表达式, 以最大程度地减少回溯并尽早进行匹配

三、量词

3.1 在 JS 中量词表示要匹配的字符或表达式的数量, 常见的量词有:

3.2 贪婪 与 非贪婪

3.3 贪婪模式下的回溯

现在我们看一个简单例子, 有如下正则 .*c 以及待匹配字符串 bbbcaaaaaaaaa, 下面我们使用 regex101 来进行测试

这里选择 Debugger 查看整个正则匹配流程(重点看 回溯)

从图中可以看出, .* 会优先匹配到所有内容, 然后在匹配字符串 c 时, 只要匹配失败, 字符串匹配位置就会进行回退(吐出一个字符), 然后再次进行匹配, 如此反复直到匹配到字符串 c

3.4 解决办法

针对上文回溯问题, 下面我们来简单优化下正则, 来避免 回溯

1. 使用非贪婪模式: .*?c

2. 使用反向字符集: [^c]*c

3.5 绝对不用「量词嵌套」

特别特别需要注意的是, 嵌套的量词 将会制造指数级的回溯, 下面我们就以 .*c 以及 (.+)*c 为例, 从 regex101 测试结果来看, 相同匹配字符串 .*c 需要 13 个步骤, (.+)*c 则直接飚到 61144 了, 但最终这两个表达式匹配到的结果却是一样的

四、多选分支

已知在 JS 中正则可使用 | 定义多个分支, 例如: x|y 可匹配 x 或者 y,

那么正则在匹配过程中如果遇到多选分支时, 引擎则会按照 从左到右 的顺序检查表达式中的多选分支, 如果某个分支匹配失败, 表达式和字符串都会进行回退(回溯), 然后选择另一个分支进行尝试... 这个过程会不断重复, 直到完成全局匹配，或所有的分支都尝试穷尽为止

4.1 回溯现象

假设有正则表达式 num(1234567890|1234567891) 待匹配字符串如下 num1234567891, 下面我们使用 regex101 来进行测试

这里选择 Debugger 查看整个正则匹配流程(重点看 回溯)

4.2 优化手段

1. 提取多选分支中的必须元素: num123456789(0|1)

2. 高优先级分支提前: num123456789(1|0)

由于正则引擎遇到分支是按照 从左到右 的顺序, 来选择分支进行匹配的, 所以我们可以通过调整分支的顺序来提高匹配效率

3. 使用字符组: num123456789[01]

这里我们还可以使用字符组 [], 和 | 不同的是它不存在分支选择问题, 本质上分支越多, 可能的回溯次数越多, 所以如果可以我们需要尽可能减少分支

五、其他正则优化手段

• 使用非捕获型括号 (): 如果不需要引用括号内的文本, 请使用非捕获括号, 不但能节省捕获的时间, 而且会减少回溯使用的状态的数量, 从两方面提高速度


• 不要滥用字符组 []: 不使用只包含一个字符的字符组, 需要付出处理字符组的代价


• 分析待匹配字符串, 将最可能匹配的分支放在前面


• 正则进行适当拆分: /最明确的规则/.test() && /更细的规则/.test(str)


• 必要时可以考虑更换正则引擎, 比如使用 DFA


• 使用检测工具进行测试, 比如: regex101


• 使用有明显确定的特征的具体字符、字符组代替通配符, 说白了尽可能描述清楚你的正则

六、回到正文

回到我们最开始的那个正则, 可以优化如下

'No, this text is not a transaction event. Therefore, the requested entities cannot be extracted.'.replace(/^[\s\S]*?JSON output:/, '')

在 regex101 的测试结果如下, 从测试结果来看前后性能提升可不是一点两点

七、参考:

• 正则表达式是如何让你的网页卡住的


• 一个正则导致浏览器页面卡死


• 正则表达式优化 - 避免灾难性回溯


• 正则引擎的几种分类


• 正则表达式引擎执行原理——从未如此清晰!


• 深入正则表达式(3):正则表达式工作引擎流程分析与原理释义...

背景

使用低代码接入了一个移动端老系统，新增页面（以及部分旧页面）使用低代码体系搭建。功能开发完成后才发现性能问题比较严重，所以进行了一次移动端的性能优化。本文就优化过程进行一个记录。

问题分析

为什么一接入低代码体系性能（主要是加载性能）就出现明显的下降，如果首屏访问的是低代码页面则更加明显

• 最主要的原因是比之前额外加载了大量的 js 和 css，初步统计有 10 个 css 和 15 个 js


• 老系统自身 js 资源过大，依赖包 vendor.js 有 8M 多


• 低代码体系下，非静态资源的接口请求也成为影响页面渲染的因素。页面必须等待接口获取到 schema 后才由低代码渲染器进行渲染

低代码体系接入

有必要简单说明下低代码体系是如何接入的，这对后面的优化是有直接影响的

• 低代码体系资源大概分为三方依赖、渲染引擎和组件库资源，都是独立的 npm 库，发布单独的 CDN


• 三方依赖就是像 react、moment、lodash 等最基础的依赖资源


• 渲染引擎要想渲染页面，又直接依赖于两个资源
  
  
  
  • 页面 schema：服务端接口返回，schema 本质上是一个 json，描述了一个组件树
  
  
  • 组件集合：由 CDN 引入的各个组件库集合，它需要先于页面 schema 加载
  
  
  
  

静态资源为何影响加载性能

静态资源加载如何影响性能，简单分析下，详细的原理可以参考 MDN

• HTML 自上而下解析，遇到 script 标签（不带 defer 和 async 属性）就会暂停解析，等待 script 加载和执行完毕后才会继续


• HTML 解析时如果遇到 css 资源，解析会继续进行。但是在 css 资源加载完成前，页面是不会渲染的，并且如果此时有 JavaScript 正在执行，也会被阻塞


• 所以 js 或 css 体积越大，则在网络传输、下载、浏览器解析和执行上所花的时间就会相应的增加，而这些时间都是会阻塞页面渲染的


• js 或者 css 的个数对于渲染的影响，很大程度上取决于项目和浏览器是否支持 http2
  
  
  
  • 如果使用了 http2，则静态资源个数对于加载性能影响不大，除非多到几百个资源
  
  
  • 如果还是 http1.1，静态资源个数对于加载有明显影响，因为此时浏览器存在并发限制，大概在 4-6 个左右，即一批次只能发送几个请求，等到请求完成后，再发下一批，是个同步的过程
  
  
  • 本项目已经支持 http2，所以优化加载性能的重点还是在减小总的资源体积上
  
  
  
  

优化指标

用户对于页面性能的感受是主观的，而优化工作则需要客观的数据。
更重要的是，有些优化措施是否有效果，有多少效果是需要数据说明的。举例来说，去除冗余资源几乎是可以预见性能提升。但是做 CDN 合并在移动端能够有多少优化效果，事前其实并不清楚
这里采用 2 种方式作为优化指标

• 旧版本 chrome(69)的 perfomance
  
  
  
  • 使用这个版本是因为后台数据显示该引擎访问量较多
  
  
  • chrome 的 performance 不仅能获取性能数据，也有助于我们分析，找出具体问题
  
  
  
  


• 使用 web-vitals 库获得具体的性能数据，主要关注
  
  
  
  • FCP，白屏时间
  
  
  • LCP，页面可视区域渲染完成时间
  
  
  
  

现状

• 点击 performance 的刷新按钮，就会自动进行一次页面的加载
  
  
  
  • 建议使用无痕模式，排除其他干扰
  
  
  • network 中勾选 Disable cache，虽然最终用户会用到缓存，但在优化非缓存项时，建议先禁用缓存，获取最真实的数据
  
  
  
  


• 静态资源的加载大概花了 3.5s


• 而后续静态资源的解析则一直持续到页面加载完成，大概在 9 秒多


• 使用 web-vitals 测量的平均数据
  
  
  
  • FCP: 5.5s
  
  
  • LCP: 9s
  
  
  
  

目标

• performance 页面渲染完成：4s 以内


• web-vitals 平均数据
  
  
  
  • FCP：3s 以内
  
  
  • LCP：4s 以内
  
  
  
  

如果从绝对性能看，这个目标只能是个中下水平。主要基于以下几点考虑

• 策略上不会对原系统或者低代码体系进行大刀阔斧的改动


• 老系统大概就是这么个性能情况，维持这个水平起码不会降低用户体验。作为内部系统，对性能没有极致的要求


• 考虑到时间成本，性能优化是一项持续性的工作，而实际项目是有时间限制和上线压力的

优化措施

根据以上分析，最重要的就是要减小总的关键资源体积。
低代码体系所需要的直接资源都属于关键资源。因为用户是可能首次直接进入一个低代码页面的（也是本次主要的优化场景）

优化前包分析

CDN 三方库资源直接就能看出哪些是冗余的，或者是公共资源加载了多遍等问题，但是自己的仓库打包后就需要借助 webpack-bundle-analyzer 插件分析了
该项目中有多个 npm 仓库需要分析，这里就举老系统自己的例子，优化前的 bundle 分析图

三方依赖 vendor.min.js 8MB 左右，项目 JS 800 多 KB，下面分析下最严重的几点

• 标 ① 部分， @ali_4ever 开头的是富文本依赖，有接近 2M 左右的大小，优化为懒加载


• 标 ② 部分，echarts5 全量引入了，1M 左右大小，计划优化为按需加载


• 标 ③ 部分，ali-oss，500 多 KB，ali-oss 不支持按需引入。这里因为多个低代码组件库中也用到了该依赖，所以计划提取为 CDN 作为公共依赖，但是大小还是 500 多 KB，只是去掉了重复加载部分


• 标 ④ 部分，antd-mobile 加载了两个版本的全量仓库，按照官方推荐，考虑将 antd-mobile-v2 按需加载

一、移除冗余资源

• 排查 CDN，是否引用了多余的 CDN，比如项目中移动端引用了 PC 端的组件库，引用了已经废弃（迁移）的工具库等等


• 排查项目 bundle，正常情况下是不可能有冗余资源的，因为如果一点没用到这个库，webpack 也不会将其打包进去
  
  
  
  • 可能存在使用到了一小部分，却打包了整个库的情况，这个属于下一部分按需引入
  
  
  
  


• 排查下线上 CDN 是否都使用生产版本或者压缩版本，这点事先没有想到，是在优化过程中意外发现存在非压缩版本

二、按需引入

按需引入即只引入三方库中项目用到的部分。现代的大部分三方库都已经支持 TreeShaking，正常打包即是按需引入。特殊情况在于 CDN、懒加载和一些老的库，这些刚好在项目中都有所实践

按需引入 和 CDN

项目中只用到了 ahooks 中的个别方法，却将整个包作为 CDN 引入，显然是不合理的

• 需要按需引入的库，是不能使用 CDN 引入的，它们之间是互斥的
  
  
  
  • 因为 CDN 需要配置 external 才能在项目里使用，external 一般是将一个三方库作为整体配置的
  
  
  
  


• CDN 自身作为一种优化手段，那是和将静态资源放置在业务服务器对比的。
  
  
  
  • 在该场景下，引入 ahooks CDN 导致 TreeShaking 失效，引入了全量包，同时增加了一次 http 请求，总的来看肯定是得不偿失的
  
  
  • 并且最终项目的 bundle 也会发布 CDN
  
  
  
  


• 因此去掉了 ahooks 的 CDN，改为直接打进项目 bundle 就行了

按需引入 和 懒加载

在该项目中，echarts 也按需引入了，echarts 的按需引入总体效果就没有 ahooks 那么好了

• echarts 无论绘制哪种类型图表，都需要引入核心库，就有 100 多 KB 的大小了


• 所以 echarts 也可以选择懒加载，懒加载会让没有使用 echarts 的页面加载速度变快，但是最终浏览器解析的资源是全量的，可以根据实际情况选择


• 懒加载 和 按需引入也无法并存。因为懒加载需要动态导入，动态导入 webpack 就没法做静态分析，这是 TreeShaking 的基础，所以就没法按需引入了

利用 babel-import-plugin

有一些老版本的库，可能还不支持按需引入，比方说 antd-mobile-v2，对于这种仓库，可以利用 babel-import-plugin 做按需引入
只需要做一下 babel 配置就行

{

  "plugins": [

    [

      "import",

      {

        "libraryName": "antd-mobile-v2",

        "style": "css"

      },

      "antd-mobile-v2"

    ]

  ]

}

• 本项目最终没有那么做，因为体积几乎没有减小。对于一个完整的项目，需要使用到的组件是非常多的


• 对于 antd-mobile 多个版本的问题，最终的优化方案还是合并为最新版，只是开发和测试的工作量大了点


• 注意点：babel-import-plugin 插件并不能让所有仓库都支持按需。本质上还是三方库做了分包才行

三、懒加载

懒加载的资源不同，也可以分为多种类型

• 三方库资源懒加载：比如之前说的，某个组件依赖于 echarts，那么就可以懒加载 echarts，只有页面中使用了该组件时才去请求和加载 echarts 依赖


• 组件懒加载：将整个组件都懒加载，在本项目中没有做组件懒加载
  
  
  
  • 低代码体系下，组件本身不能懒加载，否则 schema 解析到这个组件时找不到会报错
  
  
  • 解决方案也可以给组件套一层，实际内容懒加载，导出的组件不懒加载
  
  
  • 更重要的原因是组件库本身不大，不是影响性能的关键因素
  
  
  • 另外低代码页面本身就是由各个组件拼凑而成，如果将组件都懒加载了，那么页面各个部分都会有 Loading 的中间态，效果不好把控
  
  
  
  


• 路由懒加载：本质上它就是组件懒加载的一种，一个组件就是一个路由页面，项目中对于系统不太访问的页面做了路由懒加载

三方库资源懒加载

懒加载依赖也需要分析具体情况，比方说移动端使用了 antd-mobile 作为组件库，这个依赖就完全没必要等使用的时候再加载。因为几乎进入任意一个页面，都需要用到这个资源。什么情况下合适

• 依赖资源比较大


• 使用的频率较低，只在个别地方使用了

并且这个三方资源也是分两种情况引入，第一种是以 CDN 的形式外部引入，第二种是直接打包入库，这两种引入方式的懒加载处理是不同的，下面分别举例

CDN 引入的三方资源懒加载

比如低代码组件库中存在一个富文本组件，比较特殊，比较适合使用 CDN 的方式懒加载依赖资源

• 富文本组件依赖于公司内部的一个富文本编辑器。鉴于富文本的复杂性，所以它的依赖很大，JS+css 将近有 3M 左右。


• 但是其实只有极少的页面使用到了富文本，对于大多数用户来说，是不需要这个富文本的

下面介绍下具体实现，利用 ahooks 的 useExternal，动态注入 js 或 css 资源（也可以原生实现），封装一个高阶组件，方便调用

type LoadStatus = 'loading' | 'ready' | 'error';

interface LoadOptions {

  url: string;

  libraryName: string;

  cssUrl?: string;

  LoadingRender?: () => React.ReactNode;

  errorRender?: () => React.ReactNode;

}

export const LazyLoad = (Component, { url, libraryName, cssUrl, LoadingRender, errorRender }: LoadOptions) => {

  const LazyCom = (props) => {

    const initStatus = typeof window[libraryName] === 'undefined' ? 'loading' : 'ready';

    const [loadStatus, setStatus] = useState<LoadStatus>(initStatus);

    const jsStatus = useExternal(url, {

      keepWhenUnused: true,

    });

    const cssStatus = useExternal(cssUrl, {

      keepWhenUnused: true,

    });



    useEffect(() => {

      if (loadStatus === 'ready' || loadStatus === 'error') {

        return;

      }

      if (jsStatus === 'error' || cssStatus === 'error') {

        setStatus('error');

      }

      if (jsStatus === 'ready' && (cssStatus === 'ready' || cssStatus === 'unset')) {

        setStatus('ready');

      }

    }, [jsStatus, cssStatus, loadStatus]);



    const content = useMemo(() => {

      switch (loadStatus) {

        case 'loading':

          return typeof LoadingRender === 'function' ? LoadingRender() : <div>加载中...</div>;

        case 'ready':

          return <Component {...props} />;

        case 'error':

          return typeof errorRender === 'function' ? errorRender() : <div>加载失败</div>;

        default:

          return null;

      }

    }, [loadStatus]);



    return content;

  };

  return LazyCom;

};



// 使用示例，BaseEditor即需要懒加载的原组件，BaseEditor组件内部直接通过window取相应依赖

export const FormEditor = LazyLoad(BaseEditor, {

  url: 'xxxx',

  cssUrl: 'xxxxx',

  libraryName: 'xxxxxx',

});

打包入 bundle 依赖懒加载

总体思路是一样的，只是这类资源利用 webpack 的 import 动态导入能力，import 动态导入的资源打包时会单独分包，只在使用到时才会加载
具体实现：

export const InnerLazyLoad = (Component, loadResource, LoadingRender?) => {

  const LazyCom = (props) => {

    const [loaded, setLoaded] = useState(false);

    const [LazyResource, setResource] = useState({});



    useEffect(() => {

      if (loaded) {

        return;

      }

      loadResource().then((resource) => {

        setResource(resource);

        setLoaded(true);

      });

    }, [loaded]);

    const LoadingNode = typeof LoadingRender === 'function' ? LoadingRender() : <div>...加载中</div>;

    return loaded ? <Component {...props} LazyResource={LazyResource} /> : LoadingNode;

  };

  return LazyCom;

};



// 具体使用

const loadResource = async () => {

  // 动态导入的资源会单独分包，在使用到时才会加载

  const echarts = await import('echarts/core');

  const { PieChart } = await import('echarts/charts');

  const { TitleComponent } = await import('echarts/components');

  const { CanvasRenderer } = await import('echarts/renderers');

  return {

    echarts,

    PieChart,

    TitleComponent,

    CanvasRenderer,

  };

};



const AgentWork = InnerLazyLoad(BaseAgentWork, loadResource);

路由懒加载

路由懒加载原理和内部资源懒加载类似，分包然后首次进入该页面时才请求页面资源
本项目没有把所有页面都懒加载

• 页面懒加载后，进入页面前会有一个短暂的加载过程，需要评估影响


• 还是和通用懒加载一样，使用频率较低、页面 js 又比较大的比较适合懒加载

比如在该项目中

• 应用上存在部分页面是给第三方使用的，不能通过导航点击到达，直接分享地址给第三方


• 这些页面使用频率低，而且基本不影响本应用，因为无法通过导航点击切换到达，是通过 url 的形式直接访问，所以加载中的中间态和页面加载一起

路由懒加载的实现，不同框架都有些差异。本项目中只需在路由配置中增加配置项即可开启，就不再阐述具体代码实现

四、合并公共资源

合并公共资源，即不要重复加载相同资源
一般来说打包工具都会做依赖分析，只会打包一份相同路径的引用依赖。但是如果相同依赖分散在多个仓库中就有可能出现重复资源了
比如该项目中，老系统自身和多个组件库都使用了 ali-oss 库实现上传功能，并且还有一些条件使得将其提取为公共 CDN 是利益最大化的

• ali-oss 打包后 500 多 KB 的大小，已经算是一个不小的包了


• ali-oss 不支持按需引入，所以引用到它的多个仓库，无论引用了什么功能，都将全量打包入 ali-oss


• 如果 ali-oss 支持按需引入，就需要计算是提取为公共 CDN 划算，还是将其按需打入各个仓库中划算

实现步骤比较简单

• 在引用 ali-oss 的仓库配置 external，使仓库本身打包时不打入 ali-oss 依赖


• 在项目 HTML 中提前引入 ali-oss CDN

五、缓存

静态资源缓存

• 该项目静态资源使用 CDN+版本号，本身已经支持了缓存。CDN 的缓存时间是通过 Cache-Control 的 s-maxage 字段控制，这是 CDN 特有的字段


• 如果静态资源是放置在自己的服务器上，需要考虑 http 缓存和缓存更新的事项，这个也是老生常谈的话题，这里不再赘述

如果想要详细了解 http 缓存，推荐看下这篇文章

options 请求缓存

在实际优化过程中发现，该项目的大部分 ajax 请求，都是跨域请求，所以伴随着大量的 options 请求
推动服务端做了这些预检请求的缓存，其原理就是通过 access-control-max-age 响应头设置预检请求的缓存时间

Service Worker

Service Worker 是一项很强大的技术，它能够对网络请求进行缓存和处理，它的最大应用场景是在弱网甚至离线环境下
一旦使用了 Service Worker 技术，用户在首次安装完成后，后续的访问相当于直接在本地读取静态资源，访问速度自然能够得到提升
虽然能够提升使用体验，但是使用 Service Worker 是存在一定限制和风险的

• 必须运行在 https 协议下，调试时允许在 localhost、127.0.0.1


• Service Worker 自身不能跨越，即主线程上注册的 Service Worker 必须在当前域名下


• 一旦被安装成功就永远存在，除非线程被程序主动解除


• Service Worker 的更新是比较复杂的，如果对其了解不深，建议还是只将不常更新的资源使用 Service Worker 缓存，降低风险

项目中直接使用 workbox（对 Service Worker 做了封装，并提供一些插件），以下为示例代码

主线程上注册 Service Worker

if ('serviceWorker' in navigator) {

  navigator.serviceWorker

    .register('./sw.js')

    .then((reg) => {

      navigator.serviceWorker.addEventListener('message', (event) => {

        // 处理Worker传递的消息逻辑

      });

      console.log('注册成功：', reg);

    })

    .catch((err) => {

      console.log('注册成功：', err);

    });

}

Service Worker 线程处理缓存逻辑

//首先是异常处理

self.addEventListener('error', function (e) {

  self.clients.matchAll().then(function (clients) {

    if (clients && clients.length) {

      clients[0].postMessage({

        type: 'ERROR',

        msg: e.message || null,

        stack: e.error ? e.error.stack : null,

      });

    }

  });

});



self.addEventListener('unhandledrejection', function (e) {

  self.clients.matchAll().then(function (clients) {

    if (clients && clients.length) {

      clients[0].postMessage({

        type: 'REJECTION',

        msg: e.reason ? e.reason.message : null,

        stack: e.reason ? e.reason.stack : null,

      });

    }

  });

});



//然后引入workbox

importScripts('https://g.alicdn.com/kg/workbox/3.3.0/workbox-sw.js');



// 预缓存资源示例，不更新的资源使用预缓存

const resources = ['https://g.alicdn.com/dingding/dingtalk-jsapi/2.10.3/dingtalk.open.js'];



// 预缓存功能

workbox.precaching.precacheAndRoute(resources);



// 图片缓存 使用CacheFirst策略

workbox.routing.registerRoute(

  /\.(jpe?g|png)/,

  new workbox.strategies.CacheFirst({

    cacheName: 'image-runtime-cache',

    plugins: [

      new workbox.expiration.Plugin({

        // 对图片资源缓存 1 天

        maxAgeSeconds: 24 * 60 * 60,

        // 匹配该策略的图片最多缓存 20 张

        maxEntries: 20,

      }),

    ],

  })

);



// 需要更新的js和css资源使用staleWhileRevalidate策略

workbox.routing.registerRoute(

  new RegExp('https://g.alicdn.com/'),

  workbox.strategies.staleWhileRevalidate({

    cacheName: 'static-runtime-cache',

    plugins: [

      new workbox.expiration.Plugin({

        maxEntries: 20,

      }),

    ],

  })

);

• 预缓存功能：
  
  
  
  • 正常情况下，Service Worker 是在主程序首次请求时将资源拦截，在之后的请求中根据缓存策略处理
  
  
  • 预缓存功能是在 Service Worker 在安装阶段主动发起资源请求，并将其缓存下来
  
  
  • 当页面真正发起预缓存当中的资源请求时，资源已经被缓存了，就可以直接使用了
  
  
  • 预缓存是使用 Cache Only 策略，即在预缓存主动发起请求并获取缓存后，就只会在缓存中读取资源，不在进行缓存更新，所以适合项目中不更新的静态资源
  
  
  
  


• 图片缓存：
  
  
  
  • 图片一般情况下是不更新的，所以采用 Cache First 缓存优先策略
  
  
  • 当有缓存时会优先读取缓存，读取成功直接使用本地缓存，不再发起请求
  
  
  • 读取失败时再发起网络请求，并将结果更新到缓存中
  
  
  
  


• 对于需要更新的 JS 和 CSS
  
  
  
  • 使用 Stale While Revalidate 策略
  
  
  • 跟 Cache First 策略比较类似，都是优先返回本地缓存的资源
  
  
  • 区别在于 Stale While Revalidate 策略无论在缓存读取是否成功的时候都会发送网络请求更新本地缓存
  
  
  • 这是兼顾页面加载速度和缓存更新的策略，相对安全一些
  
  
  
  

六、其他

以下措施不具备通用性，但是在项目中用到了还是记录下来，仅供参考

• 页面 schema 接口优化：低代码体系存在页面嵌套，每个页面单独请求自己的 schema，所以在嵌套层级较多的情况下，是以同步解析的顺序请求接口，页面渲染速度较慢，优化为服务端拼装完毕后直接返回


• 部分接口的请求合并


• 去除运行时 babel，低代码设计器中存在手写的代码，这部分代码最初在运行时由 babel 转化为 ES5（设计问题），优化为保存时转换

七、项目已经存在的措施

• 静态资源放在 CDN


• 启用 http2，并且浏览器支持，这一步很重要，是否使用 http2 对优化措施有直接的影响


• js 和 css 的代码压缩，并且开启 gzip 压缩


• 使用字体图标 iconfont 代替图片图标


• CDN 合并：利用 CDN 的 combo 技术将多个 CDN 合并成一个发送（在 http2 中无明显效果）

最终优化效果

• performance 表现：页面渲染完成在 3 秒以内

• web-vitals 平均数据
  
  
  
  • FCP：2100
  
  
  • LCP：2400
  
  
  
  

参考文章

• 前端性能优化之缓存


• WEB 性能


• 11s 到 ⚡1s，性能优化之首屏加载

读本文，可以收获什么？

字数：2494 花费时间：5min

if(x)中的x为各种类型的数据或者值的时候会发生什么？x为各种数据类型、表达式、特殊值、位运算、函数等值的时，这些在if语句都充当了什么，实现了什么？

总结== === ≠三种情况特殊值的比较，如下图所示：

作为一个程序员的我们，相信我们写代码用的最多逻辑应该就是if语句了吧，其实我们真的了解if(x)究竟发生了什么？其实很简单，我们可能都知道中文有这样一个模板："如果是什么,就会做什么"，也就是说符合条件的某件事，才会去做某件事。同样的道理if(x)的意思就是如果符合x条件，我们就可以执行if语句块的代码了。而我们JavaScript中的哪个数据类型是涉及是否意思的？当然是Boolean类型啦，其实if内的x非布尔值都会做一次Boolean类型的转换的。

1 x为一个值时

1.1 x为字符串：

x为一个空字符串时，这是一个假值，if语句会转换为false。

if ("") {

    console.log("Hello World！");

}

console.log(Boolean(""));// false

x为一个非空字符串是，这是一个真值。if语句会转换为true。

if (!"") {

    console.log("Hello World！");// Hello World！

}

console.log(Boolean(!""));// true

x为一个空格字符串，这是一个真值。if语句会转换为true。否则会转换为false

if (" ") {

    console.log("Hello World！");// Hello World！

}

console.log(Boolean(" "));// true

if (!" ") {

    console.log("Hello World！");

}

console.log(Boolean(!" "));// false

x为一个字符串，这是一个真值。if语句会转换为true。否则会转换为false

if ("JavaScript") {

    console.log("Hello World！");// Hello World！

}

console.log(Boolean("JavaScript"));// true



if (!"JavaScript") {

    console.log("Hello World！");

}

console.log(Boolean(!"JavaScript"));// false

1.2 x为数字

x为一个数字0时，这是一个假值，if语句会转换为false。x为一个数字!0时，这是一个真值，if语句会转换为true。

if (0) {

    console.log("Hello World")

}

console.log(Boolean(0));// fasle



if (!0) {

    console.log("Hello World");// Hello World

}

console.log(Boolean(!0));// true

if (1) {

    console.log("Hello World") // Hello World

}

console.log(Boolean(1));// true



if (!1) {

    console.log("Hello World")

}

console.log(Boolean(!1));// false

if (-0) {

    console.log("Hello World")

}

console.log(Boolean(-0));// fasle

if (!-0) {

    console.log("Hello World");// Hello World

}

console.log(Boolean(!-0));// true

1.3 x为数组

x为一个空数组，这是一个真值，if语句会转换为true。

if ([]) {

    console.log("Hello World");// Hello World

}

console.log(Boolean([]));// true

if (![]) {

    console.log("Hello World");

}

console.log(Boolean(![]));// false

x为一个嵌套空数组时，这是一个真值，if语句会转换为true。否则是假值。if语句会转换为false

if ([[]]) {

    console.log("Hello World");// Hello World

}

console.log(Boolean([[]]));// true

if (![[]]) {

    console.log("Hello World");

}

console.log(Boolean(![[]]));// false

x为一个有空字符串的数组时，这是一个真值，if语句会转换为true。否则是假值。if语句会转换为false。

if ([""]) {

    console.log("Hello World");// Hello World

}

console.log(Boolean([""]));// true

if (![""]) {

    console.log("Hello World");

}

console.log(Boolean(![""]));// false

x为一个有数字0的数组时，这是一个真值，if语句会转换为true。否则是假值。if语句会转换为false。

if ([0]) {

    console.log("Hello World");// Hello World

}

console.log(Boolean([0]));// true

if (![0]) {

    console.log("Hello World");

}

console.log(Boolean(![0]));// false

1.4 x为对象：

if ({}) {

    console.log("Hello World") // Hello World

}

console.log(Boolean({}));// true

2 x为特殊值时

if (null) {

    console.log("Hello World");

}

console.log(Boolean(null));// false

if (undefined) {

    console.log("Hello World");

}

console.log(Boolean(undefined));// false

if (NaN) {

    console.log("Hello World");

}

console.log(Boolean(NaN));// false

3 x为位运算时

if (true | false) {

    // 按位或，只要有一个成立就为true

    console.log("Hello World");

}

console.log(Boolean(true | false));// true

4 x为表达式时

比较的相方首先调用ToPrimitive（内部函数，不能自行调用）转换为原始值，如果出现非字符串，就根据ToNumber规则将双方强制转换为数字来进行比较。

const a = [42];

const b = ["43"];

console.log(a < b);// true

5 x为等式时

5.1 一个等号（=）

=： 一个等号代表的是赋值，即使x的值为a=2，也就是说变量的声明操作放在if判断位置上了，其实它还是一个变量并不是一个操作。

let a;

if (a = 2) {

    console.log("条件成立！");// 条件成立！

}

console.log(a);// 2

let a;

if (a = 2) {

    console.log("条件成立！");// 条件成立！

}

console.log(typeof (a = 2));// number

console.log(Boolean(a = 2));// true

let a;

if (a = 2 && (a = 3)) {

    console.log("条件成立！");// 条件成立！

}



console.log(typeof (a = 2 && (a = 3)));// number;

5.2 两个等号（==）

==：宽松相等，我们可能都会这样想，==检查值是否相等，听起来蛮有道理，但不准确，真正的含义是==允许相等比较重进行强制类型转换。

对于==符号尽量遵守两个原则：

如果两边的值中有true或者false，千万不要使用==；

如果两边的值中有[]、""、0，尽量不要使用==。

• 
  

  两个值类型相同，则执行严格相等变量。

  
  

  🍟 都是字符串类型：

  
  

  const a = "";
  
  const b = "12";
  
  console.log(a == b);// false
  
  

  
  

  🍟 都是NaN类型：全称为not a number，理解为不是一个数值。JavaScript的规定, NaN表示的是非数字, 那么这个非数字可以是不同的数字,因此 NaN 不等于 NaN。

  
  

  const a = NaN;
  
  const b = NaN;
  
  console.log(a == b);// false
  
  

  
  

  🍟 都是Symbol类型：Symbol命名的属性都是独 一无二的，可以唯一标识变量值，不受是否相同变量值。

  
  

  const a = Symbol("1");
  
  const b = Symbol("1");
  
  console.log(a == b);// false
  
  

  
  

  🍟 都是对象类型。对象的比较是内存地址，因为对象是存储在堆中，当堆中有对象时，它会相对应内存中有一个存储的地址，在栈中其存储了其在堆中数据的地址，当调用数据时，去堆中调取对应堆中的数据的地址获取出来。也就是相同对象比较的是内存地址，变量不一样存储位置不一样。

  
  

  const a = { a: 1 };
  
  const b = {};
  
  console.log(a == b);// false
  
  

  
  

  const a = {};
  
  const b = {};
  
  console.log(a == b);// false
  
  console.log(Boolean(a));// true
  
  

  
  


• 
  

  两个值类型不相同。

  
  

  🍟 一个值是null，一个是undefind。

  
  

  const a = undefined;
  
  const b = null;
  
  console.log(a == b);// true
  
  

  
  

  🍟 一个值是数字，一个值是字符串。字符串强制转换为数字在比较。

  
  

  const a = 12;
  
  const b = "12";
  
  console.log(a == b);// true
  
  

  
  

  🍟 一个值是布尔值，一个是其他类型的值。这种做法是不安全，不建议去使用，在开发中尽量不要这样使用。

  
  

  console.log("0" == false);// true
  
  console.log("" == false);// true
  
  console.log(0 == false);// true
  
  console.log([] == false);// true
  
  

  
  

  🍟 一个值是对象，一个值是字符串或数字。对象与非对象的比较，对象会被强制转换原始值（通过内部函数 ToPrimitive自动执行，这个是内部函数不能直接调用）再比较。

  
  

  const a = {};
  
  const b = "";
  
  console.log(a == b);// false
  
  

  
  

5.3 三个等号（===）

===： 严格相等，我们可能都会这样想，===检查值和类型是否相等，听起来蛮有道理，但不准确，真正的含义是===不允许相等比较重进行强制类型转换，也就是不做任何处理变量是什么就是什么。

const a = 0;

const b = "0";

console.log(a === b);// false

6 x为&&、||操作时

||和&&首先会对第一个操作数（a和c）执行条件判断，如果其不是布尔值（如上例）就先进行ToBoolean强制类型转换，然后再执行条件判断。

🍟 对于||来说，如果条件判断结果为true就返回第一个操作数（a和c）的值，如果为false就返回第二个操作数（b）的值。

const a = 12;

const b = "abc";

const c = null;

if (a || b) {

    console.log("a||b");// a||b

}

console.log(typeof (a || b));// number

console.log(Boolean(a || b));// true

console.log(a || b);// 12 

const b = "abc";

const c = null;

if (c || b) {

    console.log("c||b");// c||b

}

console.log(typeof (c || b));// string

console.log(Boolean(c || b));// true

console.log(c || b);// abc

🍟 &&则相反，如果条件判断结果为true就返回第二个操作数（b）的值，如果为false就返回第一个操作数（a和c）的值。

const a = 12;

const b = "abc";

if (a && b) {

    console.log("a&&b");// a&&b

}

console.log(typeof (a && b));// string

console.log(Boolean(a && b));// true

console.log(a && b);// abc

const b = "abc";

const c = null;

if (c && b) {

    console.log("c&&b");

}

console.log(typeof (c && b));// object 

console.log(Boolean(c && b));// false

console.log(c && b);// null

7 x为函数判断时

• 
  

  typeof与instanceof的区别：

  
  

  🍟 typeof：返回值是一个字符串，用来说明变量的数据类型。一般只能返回如下几个结果：number、string、function、object、undefined，对于Array、Null等特殊对象typeof一律返回object，这正是typeof的局限性。

  
  

  console.log(typeof undefined == 'undefined');// true
  
  console.log(typeof null);// object
  
  

  
  

  🍟instanceof：返回值为布尔值，用来测试一个对象在其原型链中是否存在一个构造函数的prototype属性。用于判断一个变量是否某个对象的实例。，注意地，instanceof只能用来判断对象和函数，不能用来判断字符串和数字等。

  
  

  const arr = new Array()
  
  if (arr instanceof Array) {
  
      console.log("arr instanceof Array");// arr instanceof Array
  
  }
  
  if (arr instanceof Object) {
  
      // 因为Array是Object的子类
  
      console.log("arr instanceof Object");// arr instanceof Array
  
  }
  
  console.log(typeof (arr instanceof Array));// boolean
  
  

  
  

  🍟 typeof和instanceof都有一定的弊端，并不能满足所有场景的需求。如果需要通用检测数据类型，可以使用Object.prototype.toString.call()方法：

  
  

  Object.prototype.toString.call({});// "[object Object]"
  
  Object.prototype.toString.call([]); // "[object Array]"
  
  Object.prototype.toString.call(666); // "[object Number]"
  
  Object.prototype.toString.call("xxx"); // "[object String]"
  
  

  
  

注意，该方法返回的是一个格式为"[object Object]"的字符串。

• 
  

  indexof与includes区别：

  
  

  🍟 indexof：返回的是所含元素的下标，注意地，此函数是无法判断是否有NaN元素

  
  

  const str = "130212";
  
  if (str.indexOf("0")) {
  
      console.log("str中存在0！")
  
  }
  
  console.log(str.indexOf("0"));// 2
  
  

  
  

  🍟 includes：返回的是布尔值，代表是否存在此元素。

  
  

  const str = "130212";
  
  if (str.includes("0")) {
  
      console.log("str中存在0！")
  
  }
  
  console.log(str.includes("0"));// true
  
  

  
  

最近看韩国电视剧【D.P：逃兵追缉令】里面提到一个有趣的数学概率游戏 -> 蒙提霍尔问题

意思是：参赛者会看见三扇门，其中一扇门的里面有一辆汽车，选中里面是汽车的那扇门，就可以赢得该辆汽车，另外两扇门里面则都是一只山羊，让你任意选择其中一个，然后打开其余两个门中的一个并且是山羊（去掉一个错误答案），这时，让你重新选择。那么你是会坚持原来的选择，还是换选另外一个未被打开过的门呢？

大家可以想一想如果是自己，我们是会换还是不会换？

好了，我当时看到后感觉很有意思，所以我简单写了一套代码，源码贴在下面，大家可以验证一下，先告诉大家，换赢得汽车的概率是2/3，不换赢得汽车的概率是1/3

<header>

<h1>请选择换不换？</h1><button class="refresh">刷新</button>

</header>

<section>

<div class="box">

  <h2>1</h2>

  <canvas width="300" height="100"></canvas>

  <div class="prize">奖品</div>

</div>

<div class="box">

  <h2>2</h2>

  <canvas width="300" height="100"></canvas>

  <div class="prize">奖品</div>

</div>

<div class="box">

  <h2>3</h2>

  <canvas width="300" height="100"></canvas>

  <div class="prize">奖品</div>

</div>

</section>

<span>请选择号码牌</span>

<select name="" id="">

<option value="1">1</option>

<option value="2">2</option>

<option value="3">3</option>

</select>

<button class="confirm">确认</button>

<span class="confirm-text"></span>

<span class="opater">

<button class="change">换</button>

<button class="no-change">不换</button>

</span>

<p>

<strong>游戏规则：</strong>

<span>

  上面有三个号码牌，其中一个号码牌的里面有汽车，选中里面是汽车的号码牌，

  你就可以赢得该辆汽车，另外两个号码牌里面则都是一只山羊，

  你任意选择其中一个，然后打开其余两个号码牌中的一个并且是山羊（去掉一个错误答案），

  这时，你有一个重新选择的机会，你选择换还是不换？

</span>

</p>

.prize {

  width: 300px;

  height: 100px;

  background-color: pink;

  font-size: 36px;

  line-height: 100px;

  text-align: center;

  position: absolute;

}



canvas {

  position: absolute;

  z-index: 2;

}



section {

  display: flex;

}



.box {

  width: 300px;

  height: 200px;

  cursor: pointer;

}



.box+.box {

  margin-left: 8px;

}



header {

  display: flex;

  align-items: center;

}



header button {

  margin-left: 8px;

  height: 24px;

}

p {

  width: 400px;

  background-color: pink;

}

function shuffleArray(array) {

  for (let i = array.length - 1; i > 0; i--) {

    const j = Math.floor(Math.random() * (i + 1));

    [array[i], array[j]] = [array[j], array[i]];

  }

  return array;

}

function getRandomNumber() {

  return Math.random() > 0.5 ? 1 : 2;

}

let a1 = [0, 1, 2]

let i1 = undefined

let i2 = undefined

let isChange = false

const opater = document.querySelector('.opater')

opater.style.display = 'none'

// 随机一个奖品

const prizes = document.querySelectorAll('.prize')

let a0 = [0, 1, 2]

a0 = shuffleArray(a0)

a0.forEach((v,i) => {

  const innerText = !!v ? '山羊' : '汽车'

  prizes[i].innerText = innerText

})



const canvas = document.querySelectorAll('canvas')

const confirmText = document.querySelector('.confirm-text')

canvas.forEach(c => {

  // 使用canvas实现功能

  // 1. 使用canvas绘制一个灰色的矩形

  const ctx = c.getContext('2d')

  ctx.fillStyle = '#ccc'

  ctx.fillRect(0, 0, c.width, c.height)

  // 2. 刮奖逻辑

  // 鼠标按下且移动的时候，需要擦除canvas画布

  let done = false

  c.addEventListener('mousedown', function () {

    if (i1 === undefined) return alert('请先选择号码牌，并确认！')

    if (!isChange) return alert('请选择换不换！')

    done = true

  })

  c.addEventListener('mousemove', function (e) {

    if (done) {

      // offsetX 和 offsetY 可以获取到鼠标在元素中的偏移位置

      const x = e.offsetX - 5

      const y = e.offsetY - 5

      ctx.clearRect(x, y, 10, 10)

    }

  })

  c.addEventListener('mouseup', function () {

    done = false

  })

})

const confirm = document.querySelector('.confirm')

const refresh = document.querySelector('.refresh')

confirm.onclick = function () {

  let select = document.querySelector('select')

  const options = Array.from(select.children)

  confirmText.innerText = `您选择的号码牌是${select.value}，请问现在换不换？`

  // 选择后，去掉一个错误答案

  // i1是下标

  i1 = select.value - 1

  // delValue是值

  let delValue = undefined

  // 通过下标找值

  if (a0[i1] === 0) {

    delValue = getRandomNumber()

  } else {

    delValue = a0[i1] === 1 ? 2 : 1

  }

  // 通过值找下标

  i2 = a0.indexOf(delValue)

  // 选择的是i1, 去掉的是

  const ctx = canvas[i2].getContext('2d')

  ctx.clearRect(0, 0, 300, 100)

  options.map(v => v.disabled = true)

  confirm.style.display = 'none'

  opater.style.display = 'inline-block'

}

const change = document.querySelector('.change')

const noChange = document.querySelector('.no-change')

change.onclick = function () {

  isChange = true

  const x = a1.filter(v => v !== i1 && v !== i2)

  confirmText.innerText = `您确认选择的号码牌是${x[0] + 1}，请刮卡！`

  opater.style.display = 'none'

}

noChange.onclick = function () {

  isChange = true

  confirmText.innerText = `您确认选择的号码牌是${i1 + 1}，请刮卡！`

  opater.style.display = 'none'

}

refresh.onclick = function () {

  window.location.reload()

}