js性能优化之数组模式

程序员Winn2023-08-29 15:57

首先我们来看看下面这两段代码，两段代码都是在初始化一个长度为1亿的数组，唯一区别是在片段二中，先为最后一项赋值1次，大家觉得会有区别吗？

代码一：

js 复制代码

const arr1 = [];
for ( let i = 0; i < 100000000; ++i ) {
  arr1[i] = 1;
}

代码二：

js 复制代码

const arr2 = [];
arr2[100000000 - 1] = 1;
for ( let i = 0; i < 100000000; ++i ) {
  arr2[i] = 1;
}

我们来尝试执行一下：

可以看到片段二比片段一要耗时多出许多，片段一的耗时是318毫秒，片段二的耗时是1343毫秒，中间仅仅因为片段二先为最后一项赋值了1次。

片段二之所以会多出这部分的耗时，归根结底是因为v8会以不同的形式去存储js的数组。

第一种模式是快速模式，V8对应用c语言的数组来对js的数组进行存储，具备速度快，紧凑的特点。

第二种模式是字典模式，v8 对应用c语言的哈希表来对js的数组进行存储，特点是速度慢松散。

两种模式的触发机制如下：

如果数组从首位到最后一位是紧凑的，中间无空洞；或者预分配给数组的大小，小于10万，无论中间有没有空洞，都会进入快速模式。

但是如果预分配给数组的大小，大于等于10万，且中间有空洞，这样就会把数组进入字典模式。

我们再回到最开始的例子：

例子的逻辑是，首先我们定义一个数组，再为数组的最后一位赋1，在这个时候，这个数组已经具备了一定的长度，而且这个长度是大于10万的，而且这个数组中间是有非常多的空洞，只有最后一位有数字。这就意味着在这段片段里面执行完之后，数组就会在v8里面去进入了字典模式，而字典模式的特点是松散，而且执行相对比较慢，就会导致前面的一段时间耗时会多出许多，这就是底层的原因。

优化策略：

从0开始连续的初始化数组，以避免数组进入字典模式。
不要预分配一个超大数组 (比如长度大于等于 100000)
删除数组元素时让数组保持紧凑，尽可能避免使用 delete。
不要访问未初始化或已删除的数组元素。