JS往数组中添加项性能分析
更新时间：2015年02月25日 14:30:07 投稿：hebedich
这篇文章主要介绍了JS往数组中添加项性能分析的相关资料,需要的朋友可以参考下
比较了4种可以向数组添加项的方法之间的性能：
使用索引器添加
复制代码 代码如下:
console.time("index");
var a = [];
for (var i = 0, l = times; i < l; i++) {
a[i] = i;
}
console.timeEnd("index");
使用push方法
复制代码 代码如下:
console.time("push");
var a = [];
for (var i = 0, l = times; i < l; i++) {
a.push(i);
}
console.timeEnd("push");
使用concat方法
复制代码 代码如下:
console.time("concat");
var a = [];
for (var i = 0, l = times; i < l; i++) {
a.concat(i);
}
console.timeEnd("concat");
使用concat方法，参数为数组
复制代码 代码如下:
console.time("concat with array");
var a = [];
for (var i = 0, l = times; i < l; i++) {
a.concat([i]);
}
console.timeEnd("concat with array");
把times设置为10000（万）次：
复制代码 代码如下:
index: 0.310ms
push: 1.476ms
concat: 8.911ms
concat with array: 2.261ms
把times设置为100000（十万）次：
复制代码 代码如下:
index: 1.967ms
push: 11.980ms
concat: 70.410ms
concat with array: 28.292ms
把times设置为1000000（百万）次：
复制代码 代码如下:
index: 138.559ms
push: 93.074ms
concat: 608.768ms
concat with array: 243.371ms
把times设置为10000000（千万）次：
复制代码 代码如下:
index: 1473.733ms
push: 611.636ms
concat: 6058.528ms
concat with array: 2431.689ms
总结
该结论仅受用与chrome浏览器
concat方法的执行效率是最慢的
相比两种concat方法的传参，当接受参数为数组时，执行效率要高于接受参数为非数组
索引器多数情况下执行效率要高于push方法
当执行次数越来越多时，索引器的执行效率开始不如push方法
浏览器对比
感谢网友指出，本人经验不足，在这里补上浏览器之间的横向对比
首先是使用concat方法，在ie和firefox中，参数为数组执行效率反而别参数为非数组慢一点，但差异并不大
然后index和push的方法比concat快是肯定的了，在ie中使用index方法始终要比push快，在firefox中push略胜一筹但差异不大
比较3个浏览器之间index和push方法的执行效率差异是巨大的，firefox的执行效率要比ie和chrome高出不少，在百万次的情况下，基本快10倍，ie相比另外两者最慢
以下为百万次的结果：
复制代码 代码如下:
// firefox
index: timer started
index: 229.79ms
push: timer started
push: 205.12ms
concat: timer started
concat: 2136.99ms
concat with array: timer started
concat with array: 2365.18ms
```
复制代码 代码如下:
// ie
index: 2,533.744 毫秒
push: 3,865.979 毫秒
concat: 4,303.139 毫秒
concat with array: 4,792.208 毫秒
本文仅仅是探讨JS的性能，通过对比加深小伙伴们对javascript的理解，希望大家能够喜欢。
相关文章
下面小编就为大家带来一篇JS中实现函数return多个返回值的实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-02-02
这篇文章主要为大家详细介绍了JavaScript如何实现当文本内容过长时,中间显示省略号...,两端正常展示,有需要的小伙伴可以跟随小编一起学习一下2024-02-02
本篇文章主要介绍了js封装成插件的步骤方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
这篇文章主要为大家详细介绍了js+canvas实现简单扫雷小游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-02-02
这篇文章主要介绍了webpack的tree shaking的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-09-09
这篇文章主要介绍了mac上配置Android环境变量的方法,需要的朋友可以参考下2018-07-07
Bootstrap Navbar Component实现响应式导航
这篇文章主要介绍了Bootstrap Navbar Component实现响应式导航的相关资料,讲解了Bootstrap Navbar应用及源码解析，需要的朋友可以参考下2016-10-10
浅谈javascript的call()、apply()、bind()的用法
这篇文章主要为大家详细介绍了javascript的call()、apply()、bind()的用法，探讨JavaScript中函数的一些特殊用法，感兴趣的小伙伴们可以参考一下2016-02-02
这篇文章主要介绍了如何利用HTML+CSS+JS编写一个机器人总动员小游戏,代码简单易懂对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-11-11
这篇文章主要介绍了微信小程序 轮播图实现原理及优化详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-09-09
最新评论