js性能优化之数组模式

首先我们来看看下面这两段代码,两段代码都是在初始化一个长度为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里面去进入了字典模式,而字典模式的特点是松散,而且执行相对比较慢,就会导致前面的一段时间耗时会多出许多,这就是底层的原因。

优化策略:

  1. 从0开始连续的初始化数组,以避免数组进入字典模式。
  2. 不要预分配一个超大数组 (比如长度大于等于 100000)
  3. 删除数组元素时让数组保持紧凑,尽可能避免使用 delete。
  4. 不要访问未初始化或已删除的数组元素。
相关推荐
傻小胖42 分钟前
shallowRef和shallowReactive的用法以及使用场景和ref和reactive的区别
javascript·vue.js·ecmascript
angen20181 小时前
二十三种设计模式-享元模式
设计模式·享元模式
YoloMari1 小时前
组件中的emit
前端·javascript·vue.js·微信小程序·uni-app
CaptainDrake1 小时前
力扣 Hot 100 题解 (js版)更新ing
javascript·算法·leetcode
追光少年33223 小时前
Learning Vue 读书笔记 Chapter 2
前端·javascript·vue.js·vue3
前端熊猫3 小时前
JavaScript 的 Promise 对象和 Promise.all 方法的使用
开发语言·前端·javascript
傻小胖5 小时前
vue3中自定一个组件并且能够用v-model对自定义组件进行数据的双向绑定
前端·javascript·vue.js
我想学LINUX5 小时前
【2024年华为OD机试】 (C卷,200分)- 机器人走迷宫(JavaScript&Java & Python&C/C++)
java·c语言·javascript·python·华为od·机器人
觉醒法师5 小时前
JS通过ASCII码值实现随机字符串的生成(可指定长度以及解决首位不出现数值)
开发语言·前端·javascript·typescript
fengfeng N5 小时前
Vue3在img标签中绑定数据模型中的url图片无法显示问题
开发语言·前端·javascript