首頁 > web前端 > js教程 > javascript中如何提高擴充運算子的效能?

javascript中如何提高擴充運算子的效能?

青灯夜游
發布: 2021-02-25 10:14:15
轉載
1812 人瀏覽過

javascript中如何提高擴充運算子的效能?

在這篇文章中,我們會進行一個有趣的測試,看看我們如何提高擴充運算子的效能。

讓我們先簡單介紹一下擴充運算子在陣列中的工作原理。

擴充運算符,也就是我們常用的三個,讓陣列展開變成每個小塊。然後使用中括號語法[],重新組裝這些小塊建構一個新陣列。

擴充運算子可以被放置在中括號[]裡面的任何位置。

const numbers = [1, 2, 3];
[0, ...numbers];    // => [0, 1, 2, 3]
[0, ...numbers, 4]; // => [0, 1, 2, 3, 4]
[...numbers, 4];    // => [1, 2, 3, 4]
登入後複製

回答我們一開始提出的問題,擴充運算子在陣列文字中的位置是否可以提高效能?讓我們往後繼續探究。

附加到頭部和尾部功能

在開始效能比較之前,讓我們先定義兩個函數。

第一個是appendToTail()

function appendToTail(item, array) {
  return [...array, item];
}

const numbers = [1, 2, 3];
appendToTail(10, numbers); // => [1, 2, 3, 10]
登入後複製

appendToTail()可以讓你在陣列的最後插入一個值。此函數使用了以下寫法[...array, item]

第二個是appendToHead()

function appendToHead(item, array) {
  return [item, ...array];
}

const numbers = [1, 2, 3];
appendToHead(10, numbers); // => [10, 1, 2, 3]
登入後複製

appendToHead()是一個純函數,它傳回一個新數組,其中新增的值是插入在原數組的頭部。它使用[item, ...array]

講道理就上面這兩個函數的表現,沒有理由認為這些功能會有不一樣的效率。但事實可能跟我們想像中不一樣,下面讓我們來繼續測試吧。

效能測試

我用MacBook Pro在以下3個瀏覽器的筆記型電腦上測試[... array, item][item, ...array],比較兩者的表現:

  • Chrome 76
  • Firefox 68
  • #Safari 12.1

以下是效能測試結果:

javascript中如何提高擴充運算子的效能?

如如預期的那樣,在Firefox和Safari瀏覽器中[ ...array, item][item, ...array]具有相同的性能。

但是,在Chrome中,[...array, item]的執行速度比[item, ...array]快兩倍。這是一個有用的結果。

要在Chrome中提高擴充運算子的效能,請在陣列文字的開頭使用擴充運算子:

const result = [...array, item];
登入後複製

但另一個問題出現了:這種問題怎麼引起的?

從V8引擎的7.2版本之後,為Chrome中的JavaScript執行提供支持,可以對擴展運算符進行新的優化:快速路徑優化

用幾句話描述它的運作原理,如下:

如果沒有這個最佳化,當引擎遇到擴充運算子[...iterable, item]時,它會呼叫可迭代物件的迭代器iterator.next()。在每次迭代時,結果數組的記憶體都會增加,迭代結果會被加入到結果數組中。

但是快速路徑最佳化偵測到已知的可迭代(如整數陣列)並完全跳過迭代器物件的建立。然後引擎讀取擴展數組的長度,僅為結果數組分配一次記憶體。然後透過索引傳播數組,將每個項目加入到結果數組中。

快速路徑優化會跳過迭代物件的創建,只為結果分配一次記憶體。從而性能提高。

支援的資料結構

快速路徑最佳化適用於下列標準JavaScript資料結構。

陣列

const numbers = [1, 2, 3, 4];

[...numbers, 5]; // => [1, 2, 3, 4, 5]
登入後複製

字串

#
const message = 'Hi';

[...message, '!']; // => ['H', 'i', '!']
登入後複製

Sets

const colors = new Set(['blue', 'white']);

[...colors, 'green'];          // => ['blue', 'white', 'green']
[...colors.values(), 'green']; // => ['blue', 'white', 'green']
[...colors.keys(), 'green'];   // => ['blue', 'white', 'green']
登入後複製

#Maps

在Map物件中,僅支援map.keys()map.values()方法:

const names = new Map([[5, 'five'], [7, 'seven']]);

[...names.values(), 'ten']; // => ['five', 'seven', 'ten']
[...names.keys(), 10];      // => [5, 7, 10]
登入後複製

結論

當被擴展的陣列位於陣列的開頭時,由於快速路徑優化,您可以獲得效能提升。它適用於V8引擎7.2版本(Chrome v72和NodeJS v12附帶的特性)。

透過此最佳化,效能測試顯示[... array, item]的執行速度至少比[item, ...array]快兩倍。

請注意,雖然快速路徑確實很有用,建議您在效能很重要或處理大型陣列的地方使用它。

因為,在大多數情況下,強制最佳化,最終使用者很可能不會感覺到任何差異。

您還知道JavaScript中有哪些有趣的效能優化,可以在下面評論中告訴我?

如果文章能帶您一絲幫助或啟發,請不要吝嗇你的讚和Star,對我是前進的動力和最大的肯定

原文連結:https:/ /dmitripavlutin.com/javascript-spread-operator-performance-optimization/

更多程式相關知識,請造訪:程式設計影片! !

以上是javascript中如何提高擴充運算子的效能?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:segmentfault.com
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板