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实现弹出层效果的示例代码。具有一定的参考价值，下面跟着小编一起来看下吧2017-01-01
这篇文章主要介绍了JS+CSS实现的竖向简洁折叠菜单效果代码,涉及JavaScript链式操作与元素遍历等相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-10-10
这篇文章主要介绍了微信小程序picker组件两列关联使用方式,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-10-10
到现在，我们就有讨论 JavaScript 中的原型和继承问题的基础了。它虽然并不像你在 C++、Java 或 C# 中了解的经典继承模式一样，但这种方式同样强大，并且有可能会更加灵活2014-07-07
在线一元二次方程式计算器实例分享，大家参考使用吧2013-12-12
弹幕是一个很常见的功能,这篇文章主要给大家介绍了关于如何利用原生js模拟直播弹幕滚动效果的相关资料,文章通过示例代码介绍的非常详细,需要的朋友可以参考下2021-07-07
这篇文章主要介绍了在前端开发中判断用户登录状态是否过期的方法,包括检查令牌有效期、定时轮询服务器、全局请求拦截器和利用Web存储中的时间戳,文章还讨论了在特定场景下如何实现优雅降级,以避免中断用户操作,需要的朋友可以参考下2024-11-11
移到这里，就会自动点击...2006-08-08
这篇文章主要为大家详细介绍了原生JS+Canvas实现五子棋游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-08-08
javascript宿主对象之window.navigator详解
这篇文章主要为大家详细介绍了javascript宿主对象之window.navigator，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-09-09
最新评论