js性能优化之数组模式实例详解
更新时间：2023年10月17日 14:18:36 作者：Winn
这篇文章主要为大家介绍了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性能优化数组模式的资料请关注脚本之家其它相关文章！
相关文章
这篇文章主要介绍了JavaScript访问字符串中单个字符的两种方法,本文分别讲解了索引方式访问单个字符串、charAt()函数访问单个字符以及两种方式的不同,需要的朋友可以参考下2015-07-07
带省略号的分页只有在服务器端才可以实现，下面为大家介绍的是用js实现的带省略号的分页，感兴趣的朋友可以参考下哈，希望对你写出好的分页有所帮助2013-04-04
这篇文章主要介绍了从零搭一个自用的前端脚手架的方法步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-09-09
这篇文章主要介绍了javascript实现输出指定行数正方形图案的方法,可实现javascript获取用户输入及根据输入参数打印图形的功能,需要的朋友可以参考下2015-08-08
Promise 是一个 ECMAScript 6 提供的类，目的是更加优雅地书写复杂的异步任务。由于 Promise 是 ES6 新增加的，所以一些旧的浏览器并不支持，苹果的 Safari 10 和 Windows 的 Edge 14 版本以上浏览器才开始支持 ES6 特性2023-04-04
这篇文章主要介绍了微信小程序视图template模板引用的实例详解的相关资料,希望通过本文能帮助到大家，需要的朋友可以参考下2017-09-09
这篇文章主要为大家详细介绍了JavaScript实现打砖块游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-02-02
javascript是种脚本语言，浏览器下载到哪儿就会执行到哪儿，下面为大家介绍下，如何给应用部分的js代码一个统一的入口2014-06-06
通常小程序有为我们提供用户授权登陆的功能，但是这个只能获取用户的头像和昵称，今天带大家学习小程序登陆注册功能的开发,需要的朋友可以参考下2019-12-12
这篇文章主要介绍了javascript过滤数组重复元素的实现方法的相关资料,需要的朋友可以参考下2017-05-05
最新评论