JS往数组中添加项性能分析
比较了4种可以向数组添加项的方法之间的性能:
使用索引器添加
console.time("index"); vara=[]; for(vari=0,l=times;i<l;i++){ a[i]=i; } console.timeEnd("index");
使用push方法
console.time("push"); vara=[]; for(vari=0,l=times;i<l;i++){ a.push(i); } console.timeEnd("push");
使用concat方法
console.time("concat"); vara=[]; for(vari=0,l=times;i<l;i++){ a.concat(i); } console.timeEnd("concat");
使用concat方法,参数为数组
console.time("concatwitharray"); vara=[]; for(vari=0,l=times;i<l;i++){ a.concat([i]); } console.timeEnd("concatwitharray");
把times设置为10000(万)次:
index:0.310ms push:1.476ms concat:8.911ms concatwitharray:2.261ms
把times设置为100000(十万)次:
index:1.967ms push:11.980ms concat:70.410ms concatwitharray:28.292ms
把times设置为1000000(百万)次:
index:138.559ms push:93.074ms concat:608.768ms concatwitharray:243.371ms
把times设置为10000000(千万)次:
index:1473.733ms push:611.636ms concat:6058.528ms concatwitharray: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:timerstarted index:229.79ms push:timerstarted push:205.12ms concat:timerstarted concat:2136.99ms concatwitharray:timerstarted concatwitharray:2365.18ms ```
//ie index:2,533.744毫秒 push:3,865.979毫秒 concat:4,303.139毫秒 concatwitharray:4,792.208毫秒
本文仅仅是探讨JS的性能,通过对比加深小伙伴们对javascript的理解,希望大家能够喜欢。