陣列效能問題分析總結

豆皮範兒發表於2021-09-15
陣列

文章轉自豆皮範兒-陣列效能問題分析總結

陣列的操作避免出現O(n^2)的複雜度

陣列用來搜尋元素的方法時間複雜度為O(n)。執行時間的增長速度與資料大小的增長速度相同，常用的如下


Array.prototype.every()

Array.prototype.find()

Array.prototype.findIndex()

Array.prototype.forEach()

Array.prototype.map()

Array.prototype.reduce()

Array.prototype.some()

如果將這些方法用在for迴圈內，或者兩個方法巢狀使用，就會造成O(n^2)的複雜度，造成嚴重的效能問題。

Case 1 巢狀陣列搜尋操作


// bad case 巢狀了陣列搜尋操作

const arrayA = Array.from({length: 10000}, (v, i) => i);

const arrayB = Array.from({length: 10000}, (v, i) => i * 2);

const result = arrayA.filter((v) => arrayB.every((u) => u !== v));

優化方法：使用Set或者Map方法進行陣列的搜尋操作


// good case 使用Set.has方法，代替Array.prototype.every()

const arrayA = Array.from({length: 10000}, (v, i) => i);

const arrayB = Array.from({length: 10000}, (v, i) => i * 2);

const set = new Set(arrayB)

const result = arrayA.filter((v) => !set.has(v));

二者的效能比較：陣列大小為10000的時候，二者的效能差距已經有800倍左右

Case 2 concat的效能問題


const arrayA = Array.from({ length: 10000 }, (v, i) => i);

const result = {};

// bad case 每次concat都會新生產一個陣列，會有較大的效能消耗

arrayA.forEach((a) => {

result.children = (result.children || []).concat(a);

});

// good case 複用已有的陣列

arrayA.forEach((a) => {

if (result.children) {

result.children.push(a);

} else {

result.children = [a];

}

});

二者的效能比較：陣列大小為10000的時候，二者的效能差距已經有1600倍

Case 3 建立陣列操作的效能比較

幾種建立10000個元素陣列方法的速度比較

可以看到實際速度最快的還是for迴圈的方法，其它Array.from、解構等一行實現的方法，實際速度並不快

線上JS效能比較平臺

線上比較兩段程式碼的效能，以每秒執行次數（ops/s）為指標 https://jsbench.me

位元組跳動資料平臺前端團隊，在公司內負責大資料相關產品的研發。我們在前端技術上保持著非常強的熱情，除了資料產品相關的研發外，在資料視覺化、海量資料處理優化、web excel、WebIDE、私有化部署、工程工具都方面都有很多的探索和積累，有興趣可以與我們聯絡。

相關文章