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 相关文章推荐
js模拟滚动条(横向竖向)
Feb 22 Javascript
利用jquery包将字符串生成二维码图片
Sep 12 Javascript
浅谈Jquery为元素绑定事件
Apr 27 Javascript
在AngularJS应用中实现一些动画效果的代码
Jun 18 Javascript
讲解JavaScript的Backbone.js框架的MVC结构设计理念
Feb 14 Javascript
JavaScript事件代理和委托详解
Apr 08 Javascript
js实现上传图片及时预览
May 07 Javascript
vue.js实现格式化时间并每秒更新显示功能示例
Jul 07 Javascript
JavaScript格式化json和xml的方法示例
Jan 22 Javascript
es6 symbol的实现方法示例
Apr 02 Javascript
详解Node.JS模块 process
Aug 31 Javascript
vant时间控件使用方法详解
Dec 24 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脚本使WordPress的主题支持Widget侧边栏
2015/12/14 PHP
thinkphp利用模型通用数据编辑添加和删除的实例代码
2016/11/20 PHP
js对象的比较
2011/02/26 Javascript
jQuery 名称冲突的解决方法
2011/04/08 Javascript
理解JavaScript的prototype属性
2012/02/11 Javascript
javascript中简单的进制转换代码实例
2013/10/26 Javascript
javascript删除字符串最后一个字符
2014/01/14 Javascript
jQuery中DOM操作实例分析
2015/01/23 Javascript
jQuery DOM删除节点操作指南
2015/03/03 Javascript
JavaScript模拟深蓝vs卡斯帕罗夫的国际象棋对局示例
2015/04/22 Javascript
js实现input框文字动态变换显示效果
2015/08/19 Javascript
纯javascript移动优先的幻灯片效果
2015/11/02 Javascript
javascript代码调试之console.log 用法图文详解
2016/09/30 Javascript
es6+angular1.X+webpack 实现按路由功能打包项目的示例
2017/08/16 Javascript
JavaScript变量作用域及内存问题实例分析
2019/06/10 Javascript
Layer.js实现表格溢出内容省略号显示,悬停显示全部的方法
2019/09/16 Javascript
Vue如何获取数据列表展示
2019/12/11 Javascript
Antd的Table组件嵌套Table以及选择框联动操作
2020/10/24 Javascript
[50:28]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 Newbee vs KG
2018/04/01 DOTA
Python实现pdf文档转txt的方法示例
2018/01/19 Python
python opencv 图像尺寸变换方法
2018/04/02 Python
Python 操作mysql数据库查询之fetchone(), fetchmany(), fetchall()用法示例
2019/10/17 Python
Python迭代器模块itertools使用原理解析
2019/12/11 Python
基于Python的Jenkins的二次开发操作
2020/05/12 Python
解决PyCharm无法使用lxml库的问题(图解)
2020/12/22 Python
解决HTML5中的audio在手机端和微信端的不能自动播放问题
2019/11/04 HTML / CSS
如何打开WebSphere远程debug
2014/10/10 面试题
动物科学专业毕业生的自我评价
2013/11/29 职场文书
讲座主持词
2014/03/20 职场文书
生物科学专业毕业生求职信
2014/06/02 职场文书
学校督导评估方案
2014/06/10 职场文书
迎七一演讲稿
2014/09/12 职场文书
结婚通知短信怎么写
2015/04/17 职场文书
消防隐患整改通知书
2015/04/22 职场文书
2016年第104个国际护士节活动总结
2016/04/06 职场文书
python图像处理 PIL Image操作实例
2022/04/09 Python