Web效能最佳化系列：10個JavaScript效能提升的技巧

標籤：

由 伯樂線上 - Delostik 翻譯，黃利民 校稿。未經許可，禁止轉載！
英文出處：jonraasch.com。歡迎加入翻譯小組。

 

Nicholas Zakas是一位 JS 大師，Yahoo!首頁的前端主程。他是《高效能 Javascript》的作者，這本書值得每個程式員去閱讀。

當談到 JS 效能的時候，Zakas差不多就是你要找的，2010年六月他在Google Tech Talk發表了名為《Speed Up Your Javascript》的演講。

但 Javascript 效能最佳化絕不是一種書面的技術，Nicholas 的技術演化列出了10條建議，協助你寫出高效的 JS 代碼。

1. 定義局部變數

當一個變數被引用的時候，JavaScript將在範圍鏈中的不同成員中尋找這個變數。範圍鏈指的是當前作用於下可用變數的集合，它在各種主流瀏覽器中至少包含兩個部分：局部變數的集合和全域變數的集合。

簡單地說，如果JavaScript引擎在範圍鏈中搜尋的深度越大，那麼操作也就會消耗更多的時間。引擎首先從 this 開始尋找局部變數，然後是函數參數、本地定義的變數，最後遍曆所有的全域變數。

因為局部變數在這條鏈的起端，所以尋找局部變數總是比尋找全域變數要塊。所以當你想要不止一次地使用一個全域變數的時候，你應該將它定義成局部變數，就像這樣：

1 2	var blah = document.getElementById(‘myID‘), blah2 = document.getElementById(‘myID2‘);

改寫成

1 2 3

var doc = document, blah = doc.getElementById(‘myID‘), blah2 = doc.getElementById(‘myID2‘);

2. 不要使用 with() 語句

這是因為 with() 語句將會在範圍鏈的開始添加額外的變數。額外的變數意味著，當任何變數需要被訪問的時候，JavaScript引擎都需要先掃描with()語句產生的變數，然後才是局部變數，最後是全域變數。 So with() essentiallygives local variables all the performance drawbacks of global ones, and in turnderails Javascript optimization. 因此with()語句同時給局部變數和全域變數的效能帶來負面影響，最終使我們最佳化JavaScript效能的計劃破產。

3. 小心使用閉包

雖然你可能還不知道“閉包”，但你可能在不經意間經常使用這項技術。閉包基本上被認為是JavaScript中的new，當我們定義一個即時函數的時候，我們就使用了閉包，比如：

1	document.getElementById(‘foo‘).onclick = function(ev) { };

閉包的問題在於：根據定義，在它們的範圍鏈中至少有三個對象：閉包變數、局部變數和全域變數。這些額外的對象將會導致第1和第2個建議中提到的效能問題。

但是我認為Nicholas並不是要我們因噎廢食，閉包對於提高代碼可讀性等方面還是非常有用的，只是不要濫用它們（尤其在迴圈中）。

4. 對象屬性和數組元素的速度都比變數慢

談到JavaScript的資料，一般來說有4種訪問方式：數值、變數、對象屬性和數組元素。在考慮最佳化時，數值和變數的效能差不多，並且速度顯著優於對象屬性和數組元素。

因此當你多次引用一個對象屬性或者數組元素的時候，你可以通過定義一個變數來獲得效能提升。（這一條在讀、寫資料時都有效）

雖然這條規則在絕大多數情況下是正確的，但是Firefox在最佳化數組索引上做了一些有意思的工作，能夠讓它的實際效能優於變數。但是考慮到數組元素在其他瀏覽器上的效能弊端，還是應該盡量避免數組尋找，除非你真的只針對於Firefox瀏覽器的效能而進行開發。

5. 不要在數組中挖得太深

另外，程式員應該避免在數組中挖得太深，因為進入的層數越多，操作速度就越慢。

簡單地說，在嵌套很多層的數組中操作很慢是因為數組元素的尋找速度很慢。試想如果操作嵌套三層的數組元素，就要執行三次數組元素尋找，而不是一次。

因此如果你不斷地引用 foo.bar，你可以通過定義 var bar = foo.bar 來提高效能。

6. 避免 for-in 迴圈（和基於函數的迭代）

這是另一條非常教條的建議：不要使用for-in迴圈。

這背後的邏輯非常直接：要遍曆一個集合內的元素，你可以使用諸如for迴圈、或者do-while迴圈來替代for-in迴圈，for-in迴圈不僅僅可能需要遍曆額外的數組項，還需要更多的時間。

為了遍曆這些元素，JavaScript需要為每一個元素建立一個函數，這種基於函數的迭代帶來了一系列效能問題：額外的函數引入了函數對象被建立和銷毀的上下文，將會在範圍鏈的頂端增加額外的元素。

7. 在迴圈時將控制條件和控制變數合并起來

提到效能，在迴圈中需要避免的工作一直是個熱門話題，因為迴圈會被重複執行很多次。所以如果有效能最佳化的需求，先對迴圈開刀有可能會獲得最明顯的效能提升。

一種最佳化迴圈的方法是在定義迴圈的時候，將控制條件和控制變數合并起來，下面是一個沒有將他們合并起來的例子：

1 2	for ( var x = 0; x < 10; x++ ) { };

當我們要添加什麼東西到這個迴圈之前，我們發現有幾個操作在每次迭代都會出現。JavaScript引擎需要：

1 2 3

#1：檢查 x 是否存在 #2：檢查 x 是否小於 0 <span style="color: #888888;">（譯者註：我猜這裡是作者的筆誤）</span> #3：使 x 增加 1

然而如果你只是迭代元素中的一些元素，那麼你可以使用while迴圈進行輪轉來替代上面這種操作：

1 2	var x = 9; do { } while( x-- );

如果你想更深入地瞭解迴圈的效能，Zakas提供了一種進階的迴圈最佳化技巧，使用非同步進行迴圈（碉堡了！）

8. 為HTML集合對象定義數組

JavaScript使用了大量的HTML集合對象，比如 document.forms，document.images 等等。通常他們被諸如 getElementsByTagName、getElementByClassName 等方法調用。

由於大量的DOM selection操作，HTML集合對象相當的慢，而且還會帶來很多額外的問題。正如DOM標準中所定義的那樣：“HTML集合是一個虛擬存在，意味著當底層文檔被改變時，它們將自動更新。”這太可怕了！

儘管集合對象看起來跟數組很像，他們在某些地方卻區別很大，比如對於特定查詢的結果。當對象被訪問進行讀寫時，查詢需要重新執行來更新所有與對象相關的組分，比如 length。

HTML集合對象也非常的慢，Nicholas說好像在看球的時候對一個小動作進行60倍速慢放。另外，集合對象也有可能造成死迴圈，比如下面的例子：

1 2 3 4 5 6

var divs = document.getElementsByTagName(‘div‘);   for (var i=0; i < divs.length; i++ ) {     var div = document.createElement("div");     document.appendChild(div); }

這段代碼造成了死迴圈，因為 divs 表示一個即時的HTML集合，並不是你所期望的數組。這種即時的集合在添加 <div> 標籤時被更新，所以i < div.length 永遠都不會結束。

解決這個問題的方法是將這些元素定義成數組，相比只設定 var divs = document.getElementsByTagName(‘div’) 稍微有點麻煩，下面是Zakas提供的強制使用數組的代碼：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

function array(items) {     try {         return Array.prototype.concat.call(items);     } catch (ex) {           var i       = 0,             len     = items.length,             result  = Array(len);           while (i < len) {             result[i] = items[i];             i++;         }           return result;     } }   var divs = array( document.getElementsByTagName(‘div‘) );   for (var i=0l i < divs.length; i++ ) {     var div = document.createElement("div");     document.appendChild(div); }

9. 不要碰DOM！

不使用DOM是JavaScript最佳化中另一個很大的話題。經典的例子是添加一系列的清單項目：如果你把每個清單項目分別加到DOM中，肯定會比一次性加入所有清單項目到DOM中要慢。這是因為DOM操作開銷很大。

Zakas對這個進行了細緻的講解，解釋了由於迴流（reflow）的存在，DOM操作是非常消耗資源的。迴流通常被理解為瀏覽器重新選渲染DOM樹的處理過程。比如說，如果你用JavaScript語句改變了一個div的寬度，瀏覽器需要重繪頁面來適應變化。

任何時候只要有元素被添加到DOM樹或者從DOM樹移除，都會引發迴流。使用一個非常方便的JavaScript對象可以解決這個問題——documentFragment，我並沒有使用過，但是在Steve Souders也表示同意這種做法之後我感覺更加肯定了。 

DocumentFragment 基本上是一種瀏覽器以非可視方式實現的類似文檔的片段，非可視化的表現形式帶來了很多優點，最主要的是你可以在 documentFragment 中添加任何結點而不會引起瀏覽器迴流。

10. 修改CSS類，而不是樣式

你也許聽說過：修改CSS類必直接修改樣式會更高效。這歸結於迴流帶來的另一個問題：當配置樣式發生改變時，會引發迴流。

配置樣式意味著任何影響改變布局的變化都會強制引起瀏覽器迴流。比如寬度、高度、字型大小、浮動等。

但是別誤會我的意思，CSS類並不會避免迴流，但是可以將它的影響最小化。相比每次修改樣式都會引起迴流，使用CSS類一次修改多個樣式，只需要承擔一次迴流帶來的消耗。

因此在修改多個配置樣式的時候，使用CSS類來最佳化效能是明智的選擇。另外如果你需要在運行時定義很多歌CSS類，在DOM上添加樣式結點也是不錯的選擇。

總結

Nicholas C. Zakas 是JavaScript界的權威。在寫這篇文章的時候，我發現我引用的很多文章也是他寫的——因為太難找到其他更好的文章。

Zakas的技術演化非常棒，他解釋了很多JavaScript最佳化規則的原因，我已奉為聖經。

 

Web效能最佳化系列：10個JavaScript效能提升的技巧