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性能优化数组模式的资料请关注脚本之家其它相关文章！
相关文章
这篇文章主要为大家详细介绍了bootstrap suggest搜索建议插件的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-03-03
Base64(二进制)图片编码解析及在各种浏览器的兼容性处理
这篇文章主要介绍了Base64(二进制)图片编码解析及在各种浏览器的兼容性处理,需要的朋友可以参考下2017-02-02
这篇文章主要介绍了Javascript编程中几种继承方式比较分析,较为详细的分析了JavaScript继承的原理并对比分析了几种继承方式的实现技巧,需要的朋友可以参考下2015-11-11
这篇文章主要介绍了三种带箭头提示框总结实例 的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-06-06
FireFox并没有 window.event ,所以在FireFox下编写事件处理函数是很麻烦的事。如果要得到 event 对象,就必须要声明时间处理函数的第一个参数为event2009-11-11
可以自定义广告的图片、链接、长、宽等。光标移到图片上会出现左右箭头，感兴趣的朋友可以尝试测试下2013-10-10
这篇文章主要介绍了Js中使用正则表达式验证输入是否有特殊字符的简单代码，并通过一小段代码给大家介绍了js正则表达式验证同一字符串不同,需要的朋友可以参考下2018-09-09
本篇文章主要介绍了原生JS实现日历组件的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
这篇文章主要给大家介绍了关于一次Webpack配置文件的分离实战记录，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2018-11-11
这篇文章主要介绍了JavaScript判断数组类型的方法,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-10-10
最新评论