如何優化JavaScript腳本的性能

隨著網絡的發展，網速和機器速度的提高，越來越多的網站用到了豐富客戶端技術。而現在Ajax則是最為流行的一種方式。JavaScript是一種解釋型語言，所以能無法達到和C/Java之類的水平，限制了它能在客戶端所做的事情，為了能改進他的性能，我想基于我以前給JavaScript做過的很多測試來談談自己的經驗，希望能幫助大家改進自己的JavaScript腳本性能。

　　語言層次方面

　　循環

　　循環是很常用的一個控制結構，大部分東西要依靠它來完成，在JavaScript中，我們可以使用for(;;),while(),for(in)三種循環，事實上，這三種循環中for(in)的效率極差，因為他需要查詢散列鍵，只要可以就應該盡量少用。for(;;)和while循環的性能應該說基本(平時使用時)等價。

　　而事實上，如何使用這兩個循環，則有很大講究。我在測試中有些很有意思的情況，見附錄。最后得出的結論是：

　　如果是循環變量遞增或遞減，不要單獨對循環變量賦值，應該在它最后一次讀取的時候使用嵌套的++或--操作符。

　　如果要與數組的長度作比較，應該事先把數組的length屬性放入一個局部變量中，減少查詢次數。

　　舉例，假設arr是一個數組，最佳的遍歷元素方式為：

for(var i=0, len = arr.length;i


　　或者，如果無所謂順序的話：

for(var i=arr.length;i>0;i--){...}


　　局部變量和全局變量

　　局部變量的速度要比全局變量的訪問速度更快，因為全局變量其實是全局對象的成員，而局部變量是放在函數的棧當中的。

　　不使用Eval

　　使用eval相當于在運行時再次調用解釋引擎對內容進行運行，需要消耗大量時間。這時候使用JavaScript所支持的閉包可以實現函數模版(關于閉包的內容請參考函數式編程的有關內容)

　　減少對象查找

　　因為JavaScript的解釋性，所以a.b.c.d.e，需要進行至少4次查詢操作，先檢查a再檢查a中的b，再檢查b中的c，如此往下。所以如果這樣的表達式重復出現，只要可能，應該盡量少出現這樣的表達式，可以利用局部變量，把它放入一個臨時的地方進行查詢。

　　這一點可以和循環結合起來，因為我們常常要根據字符串、數組的長度進行循環，而通常這個長度是不變的，比如每次查詢a.length，就要額外進行一個操作，而預先把var

　　len=a.length，則就少了一次查詢。

　　字符串連接

　　如果是追加字符串，最好使用s+=anotherStr操作，而不是要使用s=s+anotherStr。

　　如果要連接多個字符串，應該少使用+=，如

　　s+=a;s+=b;s+=c;

　　應該寫成

　　s+=a + b + c;

　　而如果是收集字符串，比如多次對同一個字符串進行+=操作的話，最好使用一個緩存。怎么用呢?使用JavaScript數組來收集，最后使用join方法連接起來，如下

var buf = new Array();for(var i = 0; i < 100; i++){ buf.push(i.toString());}var all = buf.join("");


　　類型轉換

　　類型轉換是大家常犯的錯誤，因為JavaScript是動態類型語言，你不能指定變量的類型。

　　1.把數字轉換成字符串，應用"" + 1，雖然看起來比較丑一點，但事實上這個效率是最高的，性能上來說：

　　("" + ) > String() > .toString() > new String()

　　這條其實和下面的“直接量”有點類似，盡量使用編譯時就能使用的內部操作要比運行時使用的用戶操作要快。

　　String()屬于內部函數，所以速度很快，而.toString()要查詢原型中的函數，所以速度遜色一些，new String()用于返回一個精確的副本。

　　2.浮點數轉換成整型，這個更容易出錯，很多人喜歡使用parseInt()，其實parseInt()是用于將字符串轉換成數字，而不是浮點數和整型之間的轉換，我們應該使用Math.floor()或者Math.round()。

　　另外，和第二節的對象查找中的問題不一樣，Math是內部對象，所以Math.floor()其實并沒有多少查詢方法和調用的時間，速度是最快的。

　　3.對于自定義的對象，如果定義了toString()方法來進行類型轉換的話，推薦顯式調用toString()，因為內部的操作在嘗試所有可能性之后，會嘗試對象的toString()方法嘗試能否轉化為String，所以直接調用這個方法效率會更高