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 相关文章推荐
在网站上应该用的30个jQuery插件整理
Nov 03 Javascript
带左右箭头图片轮播的JS代码
Dec 18 Javascript
Jquery焦点与失去焦点示例应用
Jun 10 Javascript
谷歌浏览器调试JavaScript小技巧
Dec 29 Javascript
JavaScript+CSS实现的可折叠二级菜单实例
Feb 29 Javascript
微信小程序  Mustache语法详细介绍
Oct 27 Javascript
ES6 javascript的异步操作实例详解
Oct 30 Javascript
js遍历添加栏目类添加css 再点击其它删除css【推荐】
Jun 12 Javascript
微信小程序开发之tabbar图标和颜色的实现
Oct 17 Javascript
模块化react-router配置方法详解
Jun 03 Javascript
详解Vue template 如何支持多个根结点
Feb 10 Javascript
Vue proxyTable配置多个接口地址,解决跨域的问题
Sep 11 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
js url传值中文乱码之解决之道
2009/11/20 Javascript
JavaScript打字小游戏代码
2011/12/26 Javascript
用IE重起计算机或者关机的示例代码
2014/03/10 Javascript
NodeJS制作爬虫全过程
2014/12/22 NodeJs
JavaScript数组随机排列实现随机洗牌功能
2015/03/19 Javascript
jQuery对JSON数据进行排序输出的方法
2015/06/24 Javascript
js实现鼠标左右移动,图片也跟着移动效果
2017/01/25 Javascript
Bootstrap 设置datetimepicker在屏幕上面弹出设置方法
2017/03/21 Javascript
JS实现侧边栏鼠标经过弹出框+缓冲效果
2017/03/29 Javascript
利用JS实现scroll自定义滚动效果详解
2017/10/17 Javascript
动态加载权限管理模块中的Vue组件
2018/01/16 Javascript
jQuery实现的淡入淡出与滑入滑出效果示例
2018/04/18 jQuery
jQuery实现导航样式布局操作示例【可自定义样式布局】
2018/07/24 jQuery
详解ECMAScript typeof用法
2018/07/25 Javascript
[原创]微信小程序获取网络类型的方法示例
2019/03/01 Javascript
layui框架与SSM前后台交互的方法
2019/09/12 Javascript
细说webpack6 Babel的使用详解
2019/09/26 Javascript
原生JavaScript之es6中Class的用法分析
2020/02/23 Javascript
vue 解决uglifyjs-webpack-plugin打包出现报错的问题
2020/08/04 Javascript
[01:09:24]Ti4开幕式
2014/07/19 DOTA
[10:18]2018DOTA2国际邀请赛寻真——Fnatic能否笑到最后?
2018/08/14 DOTA
python搜索指定目录的方法
2015/04/29 Python
在Django框架中设置语言偏好的教程
2015/07/27 Python
Python文件操作,open读写文件,追加文本内容实例
2016/12/14 Python
python实现发送邮件功能代码
2017/12/14 Python
python-str,list,set间的转换实例
2018/06/27 Python
python爬虫之自动登录与验证码识别
2020/06/15 Python
Python程序包的构建和发布过程示例详解
2019/06/09 Python
大学生护理专业自荐信
2013/10/03 职场文书
工程管理专业毕业生自荐信
2014/01/24 职场文书
幼儿园教师教育感言
2014/02/28 职场文书
交通事故责任认定书
2015/08/06 职场文书
nginx如何将http访问的网站改成https访问
2021/03/31 Servers
总结Python使用过程中的bug
2021/06/18 Python
深入理解CSS 中 transform matrix矩阵变换问题
2021/08/30 HTML / CSS
《勇者辞职不干了》上卷BD发售宣传CM公开
2022/04/08 日漫