JS往數(shù)組中添加項性能分析
比較了4種可以向數(shù)組添加項的方法之間的性能：
使用索引器添加
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方法，參數(shù)為數(shù)組
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設(shè)置為10000（萬）次：
index: 0.310ms
push: 1.476ms
concat: 8.911ms
concat with array: 2.261ms
把times設(shè)置為100000（十萬）次：
index: 1.967ms
push: 11.980ms
concat: 70.410ms
concat with array: 28.292ms
把times設(shè)置為1000000（百萬）次：
index: 138.559ms
push: 93.074ms
concat: 608.768ms
concat with array: 243.371ms
把times設(shè)置為10000000（千萬）次：
index: 1473.733ms
push: 611.636ms
concat: 6058.528ms
concat with array: 2431.689ms
總結(jié)
該結(jié)論僅受用與chrome瀏覽器
concat方法的執(zhí)行效率是最慢的
相比兩種concat方法的傳參，當(dāng)接受參數(shù)為數(shù)組時，執(zhí)行效率要高于接受參數(shù)為非數(shù)組
索引器多數(shù)情況下執(zhí)行效率要高于push方法
當(dāng)執(zhí)行次數(shù)越來越多時，索引器的執(zhí)行效率開始不如push方法
瀏覽器對比
感謝網(wǎng)友指出，本人經(jīng)驗不足，在這里補上瀏覽器之間的橫向?qū)Ρ?/p>
首先是使用concat方法，在ie和firefox中，參數(shù)為數(shù)組執(zhí)行效率反而別參數(shù)為非數(shù)組慢一點，但差異并不大
然后index和push的方法比concat快是肯定的了，在ie中使用index方法始終要比push快，在firefox中push略勝一籌但差異不大
比較3個瀏覽器之間index和push方法的執(zhí)行效率差異是巨大的，firefox的執(zhí)行效率要比ie和chrome高出不少，在百萬次的情況下，基本快10倍，ie相比另外兩者最慢
以下為百萬次的結(jié)果：
// 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的理解，希望大家能夠喜歡。
相關(guān)文章
JS中實現(xiàn)函數(shù)return多個返回值的實例
下面小編就為大家?guī)硪黄狫S中實現(xiàn)函數(shù)return多個返回值的實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-02-02
這篇文章主要為大家詳細(xì)介紹了JavaScript如何實現(xiàn)當(dāng)文本內(nèi)容過長時,中間顯示省略號...,兩端正常展示,有需要的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-02-02
本篇文章主要介紹了js封裝成插件的步驟方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
這篇文章主要為大家詳細(xì)介紹了js+canvas實現(xiàn)簡單掃雷小游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-02-02
webpack的tree shaking的實現(xiàn)方法
這篇文章主要介紹了webpack的tree shaking的實現(xiàn)方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
這篇文章主要介紹了mac上配置Android環(huán)境變量的方法,需要的朋友可以參考下2018-07-07
Bootstrap Navbar Component實現(xiàn)響應(yīng)式導(dǎo)航
這篇文章主要介紹了Bootstrap Navbar Component實現(xiàn)響應(yīng)式導(dǎo)航的相關(guān)資料,講解了Bootstrap Navbar應(yīng)用及源碼解析，需要的朋友可以參考下2016-10-10
淺談javascript的call()、apply()、bind()的用法
這篇文章主要為大家詳細(xì)介紹了javascript的call()、apply()、bind()的用法，探討JavaScript中函數(shù)的一些特殊用法，感興趣的小伙伴們可以參考一下2016-02-02
這篇文章主要介紹了如何利用HTML+CSS+JS編寫一個機器人總動員小游戲,代碼簡單易懂對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-11-11
這篇文章主要介紹了微信小程序 輪播圖實現(xiàn)原理及優(yōu)化詳解,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-09-09