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 相关文章推荐
对象特征检测法判断浏览器对javascript对象的支持
Jul 25 Javascript
jquery的$(document).ready()和onload的加载顺序
May 26 Javascript
Kibo 用于处理键盘事件的Javascript工具库
Oct 28 Javascript
jQuery替换textarea中换行的方法
Jun 10 Javascript
jQuery动态星级评分效果实现方法
Aug 06 Javascript
JavaScript知识点整理
Dec 09 Javascript
angularJS 如何读写缓冲的方法(推荐)
Aug 06 Javascript
利用yarn实现一个webpack+react种子
Oct 25 Javascript
js实现适合新闻类图片的轮播效果
Feb 05 Javascript
原生JS实现圣旨卷轴展开效果
Mar 06 Javascript
利用jquery正则表达式在页面验证url网址输入是否正确
Apr 04 jQuery
vue2.0使用v-for循环制作多级嵌套菜单栏
Jun 25 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
实用函数2
2007/11/08 PHP
浅谈PHP无限极分类原理
2019/03/14 PHP
PHP实现一个限制实例化次数的类示例
2019/09/16 PHP
JavaScript实现三阶幻方算法谜题解答
2014/12/29 Javascript
利用Js+Css实现折纸动态导航效果实例源码
2017/01/25 Javascript
vue.js利用Object.defineProperty实现双向绑定
2017/03/09 Javascript
纯JS实现只能输入数字的简单代码
2017/06/21 Javascript
给vue项目添加ESLint的详细步骤
2017/09/29 Javascript
js时间戳转yyyy-MM-dd HH-mm-ss工具类详解
2019/04/30 Javascript
Vue调用后端java接口的实例代码
2019/10/28 Javascript
原生JS实现记忆翻牌游戏
2020/07/31 Javascript
[02:49]2018DOTA2亚洲邀请赛主赛事决赛日战况回顾 Mineski鏖战5局夺得辉耀
2018/04/10 DOTA
Python脚本实现代码行数统计代码分享
2015/03/10 Python
Python EOL while scanning string literal问题解决方法
2020/09/18 Python
python转换字符串为摩尔斯电码的方法
2015/07/06 Python
python操作字典类型的常用方法(推荐)
2016/05/16 Python
Python复数属性和方法运算操作示例
2017/07/21 Python
python中获得当前目录和上级目录的实现方法
2017/10/12 Python
放弃 Python 转向 Go语言有人给出了 9 大理由
2017/10/20 Python
详解用Python处理HTML转义字符的5种方式
2017/12/27 Python
Pycharm配置远程调试的方法步骤
2018/12/17 Python
Python基本数据结构与用法详解【列表、元组、集合、字典】
2019/03/23 Python
python3 property装饰器实现原理与用法示例
2019/05/15 Python
Python循环实现n的全排列功能
2019/09/16 Python
Mac 使用python3的matplot画图不显示的解决
2019/11/23 Python
解决启动django,浏览器显示“服务器拒绝访问”的问题
2020/05/13 Python
canvas生成带二维码海报的踩坑记录
2019/09/11 HTML / CSS
表达自我的市场:Society6
2018/08/01 全球购物
YSL圣罗兰美妆俄罗斯官网:Yves Saint Lauret RU
2020/09/23 全球购物
定义一结构体数组表示分数,并求两个分数相加之和
2013/06/11 面试题
新闻学专业大学生职业生涯规划范文
2014/03/02 职场文书
改作风抓落实促发展心得体会
2014/09/10 职场文书
2014年保险业务员工作总结
2014/12/23 职场文书
中考学习决心书
2015/02/04 职场文书
幼儿园中秋节活动总结
2015/03/23 职场文书
2019销售早会主持词
2019/06/27 职场文书