JS往数组中添加项性能分析
作者:bea
比较了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 = t
比较了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的理解,希望大家能够喜欢。
有用 | 无用
使用索引器添加
代码如下:
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实现很酷的水波文字特效实例
- jQuery中slideUp 和 slideDown 的点击事件
- jQuery实现移动 和 渐变特效的点击事件
- jQuery 回调函数(callback)的使用和基础
- 使用jQuery获得内容以及内容的属性
- js实现跟随鼠标移动且带关闭功能的图片广告实例
- jquery渐隐渐显的图片幻灯闪烁切换实现方法
- 2则自己编写的jQuery特效分享
- javascript制作网页图片上实现下雨效果
- js实现格式化金额,字符,时间的方法
- 如何减少浏览器的reflow和repaint
- 详谈javascript中DOM的基本属性
- jqueryUI里拖拽排序示例分析
- Jquery的基本对象转换和文档加载用法实例
- jQuery操作JSON的CRUD用法实例
- javascript实现复选框超过限制即弹出警告框的方法
- javascript获得当前的信息的一些常用命令
- javascript实现图像循环明暗变化的方法
- NodeJS中利用Promise来封装异步函数