Nicholas Zakas是一位 JS 大師，Yahoo! 首頁的前端主程。他是《高性能 Javascript》的作者，這本書值得每個程序員去閱讀。
當談到 JS 性能的時候，Zakas差不多就是你要找的，2010年六月他在Google Tech Talk發表了名為《Speed Up Your Javascript》的演講。
但 Javascript 性能優化絕不是一種書面的技術，Nicholas 的技術演進列出了10條建議，幫助你寫出高效的 JS 代碼。
1. 定義局部變量
當一個變量被引用的時候，JavaScript將在作用域鏈中的不同成員中查找這個變量。作用域鏈指的是當前作用於下可用變量的集合，它在各種主流浏覽器中至少包含兩個部分：局部變量的集合和全局變量的集合。
簡單地說，如果JavaScript引擎在作用域鏈中搜索的深度越大，那麼操作也就會消耗更多的時間。引擎首先從 this 開始查找局部變量，然後是函數參數、本地定義的變量，最後遍歷所有的全局變量。
因為局部變量在這條鏈的起端，所以查找局部變量總是比查找全局變量要塊。所以當你想要不止一次地使用一個全局變量的時候，你應該將它定義成局部變量，就像這樣：
var blah = document.getElementById('myID'),
blah2 = document.getElementById('myID2');
改寫成
var doc = document,
blah = doc.getElementById('myID'),
blah2 = doc.getElementById('myID2');
2. 不要使用 with() 語句
這是因為 with() 語句將會在作用域鏈的開始添加額外的變量。額外的變量意味著，當任何變量需要被訪問的時候，JavaScript引擎都需要先掃描with()語句產生的變量，然後才是局部變量，最後是全局變量。
So with() essentially gives local variables all the performance drawbacks of global ones, and in turn derails Javascript optimization. 因此with()語句同時給局部變量和全局變量的性能帶來負面影響，最終使我們優化JavaScript性能的計劃破產。
3. 小心使用閉包
雖然你可能還不知道“閉包”，但你可能在不經意間經常使用這項技術。閉包基本上被認為是JavaScript中的new，當我們定義一個即時函數的時候，我們就使用了閉包，比如：
document.getElementById('foo').onclick = function(ev) { };
閉包的問題在於：根據定義，在它們的作用域鏈中至少有三個對象：閉包變量、局部變量和全局變量。這些額外的對象將會導致第1和第2個建議中提到的性能問題。
但是我認為Nicholas並不是要我們因噎廢食，閉包對於提高代碼可讀性等方面還是非常有用的，只是不要濫用它們（尤其在循環中）。
4. 對象屬性和數組元素的速度都比變量慢
談到JavaScript的數據，一般來說有4種訪問方式：數值、變量、對象屬性和數組元素。在考慮優化時，數值和變量的性能差不多，並且速度顯著優於對象屬性和數組元素。
因此當你多次引用一個對象屬性或者數組元素的時候，你可以通過定義一個變量來獲得性能提升。（這一條在讀、寫數據時都有效）
雖然這條規則在絕大多數情況下是正確的，但是Firefox在優化數組索引上做了一些有意思的工作，能夠讓它的實際性能優於變量。但是考慮到數組元素在其他浏覽器上的性能弊端，還是應該盡量避免數組查找，除非你真的只針對於火狐浏覽器的性能而進行開發。
5. 不要在數組中挖得太深
另外，程序員應該避免在數組中挖得太深，因為進入的層數越多，操作速度就越慢。
簡單地說，在嵌套很多層的數組中操作很慢是因為數組元素的查找速度很慢。試想如果操作嵌套三層的數組元素，就要執行三次數組元素查找，而不是一次。
因此如果你不斷地引用 foo.bar， 你可以通過定義 var bar = foo.bar 來提高性能。
6. 避免 for-in 循環（和基於函數的迭代）
這是另一條非常教條的建議：不要使用for-in循環。
這背後的邏輯非常直接：要遍歷一個集合內的元素，你可以使用諸如for循環、或者do-while循環來替代for-in循環，for-in循環不僅僅可能需要遍歷額外的數組項，還需要更多的時間。
為了遍歷這些元素，JavaScript需要為每一個元素建立一個函數，這種基於函數的迭代帶來了一系列性能問題：額外的函數引入了函數對象被創建和銷毀的上下文，將會在作用域鏈的頂端增加額外的元素。
7. 在循環時將控制條件和控制變量合並起來
提到性能，在循環中需要避免的工作一直是個熱門話題，因為循環會被重復執行很多次。所以如果有性能優化的需求，先對循環開刀有可能會獲得最明顯的性能提升。
一種優化循環的方法是在定義循環的時候，將控制條件和控制變量合並起來，下面是一個沒有將他們合並起來的例子：
for ( var x = 0; x < 10; x++ ) {
};
當我們要添加什麼東西到這個循環之前，我們發現有幾個操作在每次迭代都會出現。JavaScript引擎需要：
#1：檢查 x 是否存在
#2：檢查 x 是否小於 0 （譯者注：我猜這裡是作者的筆誤）
#3：使 x 增加 1
然而如果你只是迭代元素中的一些元素，那麼你可以使用while循環進行輪轉來替代上面這種操作：
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倍速慢放。另外，集合對象也有可能造成死循環，比如下面的例子：
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提供的強制使用數組的代碼：
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優化規則的原因，我已奉為聖經。