JS往数组中添加项性能分析


Posted in Javascript onFebruary 25, 2015

比较了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的理解,希望大家能够喜欢。

Javascript 相关文章推荐
ext实现完整的登录代码
Aug 08 Javascript
JQuery在页面中添加和除移DOM示例代码
Jun 24 Javascript
JSON与XML优缺点对比分析
Jul 17 Javascript
javascript实现右侧弹出“分享到”窗口效果
Feb 01 Javascript
asp.net+jquery.form实现图片异步上传的方法(附jquery.form.js下载)
May 05 Javascript
canvas的神奇用法
Feb 03 Javascript
js实现瀑布流效果(自动生成新的内容)
Mar 16 Javascript
原生js获取left值和top值的三种方法
Aug 02 Javascript
javaScript和jQuery自动加载简单代码实现方法
Nov 24 jQuery
Angular使用Restful的增删改
Dec 28 Javascript
vue vant Area组件使用详解
Dec 09 Javascript
JavaScript实现PC端横向轮播图
Feb 07 Javascript
浅谈JavaScript中的String对象常用方法
Feb 25 #Javascript
JS实现点击颜色块切换指定区域背景颜色的方法
Feb 25 #Javascript
提交按钮的name='submit'引起的js失效问题及原因
Feb 25 #Javascript
JavaScript生成的动态下雨背景效果实现方法
Feb 25 #Javascript
JS实现进入页面时渐变背景色的方法
Feb 25 #Javascript
JS实现让网页背景图片斜向移动的方法
Feb 25 #Javascript
Javascript中获取对象的原型对象的方法小结
Feb 25 #Javascript
You might like
php循环语句 for()与foreach()用法区别介绍
2012/09/05 PHP
Could not load type System.ServiceModel.Activation.HttpModule解决办法
2012/12/29 PHP
php中heredoc与nowdoc介绍
2014/12/25 PHP
thinkPHP查询方式小结
2016/01/09 PHP
PHP使用SOAP扩展实现WebService的方法
2016/04/01 PHP
Jquery 1.42 checkbox 全选和反选代码
2010/03/27 Javascript
JQuery中的ready函数冲突的解决方法
2010/05/17 Javascript
js操作模态窗口及父子窗口间相互传值示例
2014/06/09 Javascript
jquery实现显示已选用户
2014/07/21 Javascript
JavaScript 基本概念
2015/01/20 Javascript
JS实现来回出现文字的状态栏特效代码
2015/10/31 Javascript
jQuery插件dataTables添加序号列的方法
2016/07/06 Javascript
基于bootstrap实现广告轮播带图片和文字效果
2016/07/22 Javascript
json定义及jquery操作json的方法
2016/10/03 Javascript
AngularJS+Bootstrap实现多文件上传与管理
2016/11/08 Javascript
AngularJS入门教程之路由机制ngRoute实例分析
2016/12/13 Javascript
简单实现node.js图片上传
2016/12/18 Javascript
jQuery Validation Engine验证控件调用外部函数验证的方法
2017/01/18 Javascript
创建简单的node服务器实例(分享)
2017/06/23 Javascript
jQuery动态添加元素无法触发绑定事件的解决方法分析
2018/01/02 jQuery
jquery实现点击弹出对话框
2020/02/08 jQuery
Javascript摸拟自由落体与上抛运动原理与实现方法详解
2020/04/08 Javascript
JavaScript实现H5接金币功能(实例代码)
2021/02/22 Javascript
Python中对列表排序实例
2015/01/04 Python
PyQt5每天必学之关闭窗口
2018/04/19 Python
Python命名空间的本质和加载顺序
2018/12/17 Python
在Pytorch中使用样本权重(sample_weight)的正确方法
2019/08/17 Python
在notepad++中实现直接运行python代码
2019/12/18 Python
python使用ctypes调用扩展模块的实例方法
2020/01/28 Python
Python集合操作方法详解
2020/02/09 Python
套娃式文件夹如何通过Python批量处理
2020/08/23 Python
新加坡网上花店:FlowerAdvisor新加坡
2018/10/05 全球购物
2015年路政工作总结
2015/05/22 职场文书
教师节老师寄语
2015/05/28 职场文书
2016年学校十一国庆节活动总结
2016/04/01 职场文书
python绘图subplots函数使用模板的示例代码
2021/04/30 Python