js性能优化之数组模式实例详解
实例
首先我们来看看下面这两段代码，两段代码都是在初始化一个长度为1亿的数组，唯一区别是在片段二中，先为最后一项赋值1次，大家觉得会有区别吗？
代码一：
const arr1 = [];
for ( let i = 0; i < 100000000; ++i ) {
arr1[i] = 1;
}代码二：
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。
不要访问未初始化或已删除的数组元素。
以上就是js性能优化之数组模式实例详解的详细内容，更多关于js性能优化数组模式的资料请关注脚本之家其它相关文章！
相关文章
实用的JS正则表达式(手机号码/IP正则/邮编正则/电话等)
实用的JS正则表达式(手机号码/IP正则/邮编正则/电话等),经验积累，感兴趣的朋友可以了解下，一定会对你有帮助的2013-01-01
这篇文章主要介绍了JS实现三个层重叠点击互相切换的方法,涉及JavaScript动态操作页面定位属性的相关技巧,需要的朋友可以参考下2015-10-10
本篇文章主要介绍了详解webpack3如何正确引用并使用jQuery库，具有一定的参考价值，有兴趣的可以了解一下2017-08-08
这篇文章主要为大家详细介绍了js实现图片跟随鼠标移动效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-10-10
本文主要介绍了TypeScript中使用回调函数的实现,包括定义回调函数、处理错误、使用匿名函数、最佳实践以及示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2025-12-12
这篇文章主要介绍了微信公众平台 发送模板消息(Java接口开发)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
JavaScript查看代码运行效率console.time()与console.timeEnd()用法
今天小编就为大家分享一篇关于JavaScript查看代码运行效率console.time()与console.timeEnd()用法，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧2019-01-01
虽然js是基于对象的，但在很多时候会使用到new这个操作符。2010-12-12
这篇文章主要介绍了JavaScript JMap类定义与使用方法,涉及javascript类的定义、内部变量、函数的定义及使用相关操作技巧,需要的朋友可以参考下2019-01-01
这篇文章主要为大家详细介绍了js实现小星星游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-03-03
最新评论