如何優(yōu)化JavaScript腳本的性能
作者：ShiningRay @ Nirvana Studio
隨著(zhù)網(wǎng)絡(luò )的發(fā)展，網(wǎng)速和機器速度的提高，越來(lái)越多的網(wǎng)站用到了豐富客戶(hù)端技術(shù)。而現在Ajax則是最為流行的一種方式。JavaScript是一種解釋型語(yǔ)言，所以性能無(wú)法達到和C/Java之類(lèi)的水平，限制了它能在客戶(hù)端所做的事情，為了能改進(jìn)他的性能，我想基于我以前給JavaScript做過(guò)的很多測試來(lái)談?wù)勛约旱慕?jīng)驗，希望能幫助大家改進(jìn)自己的JavaScript腳本性能。
循環(huán)是很常用的一個(gè)控制結構，大部分東西要依靠它來(lái)完成，在JavaScript中，我們可以使用for(;;),while(),for(in)三種循環(huán)，事實(shí)上，這三種循環(huán)中for(in)的效率極差，因為他需要查詢(xún)散列鍵，只要可以，就應該盡量少用。for(;;)和while循環(huán)，while循環(huán)的效率要優(yōu)于for(;;)，可能是因為for(;;)結構的問(wèn)題，需要經(jīng)常跳轉回去。
局部變量的速度要比全局變量的訪(fǎng)問(wèn)速度更快，因為全局變量其實(shí)是全局對象的成員，而局部變量是放在函數的棧當中的。
使用eval相當于在運行時(shí)再次調用解釋引擎對內容進(jìn)行運行，需要消耗大量時(shí)間。這時(shí)候使用JavaScript所支持的閉包可以實(shí)現函數模版（關(guān)于閉包的內容請參考函數式編程的有關(guān)內容）
因為JavaScript的解釋性，所以a.b.c.d.e，需要進(jìn)行至少4次查詢(xún)操作，先檢查a再檢查a中的b，再檢查b中的c，如此往下。所以如果這樣的表達式重復出現，只要可能，應該盡量少出現這樣的表達式，可以利用局部變量，把它放入一個(gè)臨時(shí)的地方進(jìn)行查詢(xún)。
這一點(diǎn)可以和循環(huán)結合起來(lái)，因為我們常常要根據字符串、數組的長(cháng)度進(jìn)行循環(huán)，而通常這個(gè)長(cháng)度是不變的，比如每次查詢(xún)a.length，就要額外進(jìn)行一個(gè)操作，而預先把var len=a.length，則就少了一次查詢(xún)。
如果是追加字符串，最好使用s+=anotherStr操作，而不是要使用s=s+anotherStr。
如果要連接多個(gè)字符串，應該少使用+=，如
s+=a;
s+=b;
s+=c;
應該寫(xiě)成s+=a + b + c；
而如果是收集字符串，比如多次對同一個(gè)字符串進(jìn)行+=操作的話(huà)，最好使用一個(gè)緩存。怎么用呢？使用JavaScript數組來(lái)收集，最后使用join方法連接起來(lái)，如下
var buf = new Array();
for(var i = 0; i < 100; i++){
buf.push(i.toString());
}
var all = buf.join("");
類(lèi)型轉換是大家常犯的錯誤，因為JavaScript是動(dòng)態(tài)類(lèi)型語(yǔ)言，你不能指定變量的類(lèi)型。
1. 把數字轉換成字符串，應用"" + 1，雖然看起來(lái)比較丑一點(diǎn)，但事實(shí)上這個(gè)效率是最高的，性能上來(lái)說(shuō)：
("" +) > String() > .toString() > new String()
這條其實(shí)和下面的“直接量”有點(diǎn)類(lèi)似，盡量使用編譯時(shí)就能使用的內部操作要比運行時(shí)使用的用戶(hù)操作要快。
String()屬于內部函數，所以速度很快，而.toString()要查詢(xún)原型中的函數，所以速度遜色一些，new String()用于返回一個(gè)精確的副本。
2. 浮點(diǎn)數轉換成整型，這個(gè)更容易出錯，很多人喜歡使用parseInt()，其實(shí)parseInt()是用于將字符串轉換成數字，而不是浮點(diǎn)數和整型之間的轉換，我們應該使用Math.floor()或者Math.round()。
另外，和第二節的對象查找中的問(wèn)題不一樣，Math是內部對象，所以Math.floor()其實(shí)并沒(méi)有多少查詢(xún)方法和調用的時(shí)間，速度是最快的。
3. 對于自定義的對象，如果定義了toString()方法來(lái)進(jìn)行類(lèi)型轉換的話(huà)，推薦顯式調用toString()，因為內部的操作在嘗試所有可能性之后，會(huì )嘗試對象的toString()方法嘗試能否轉化為String，所以直接調用這個(gè)方法效率會(huì )更高
其實(shí)這個(gè)影響倒比較小，可以忽略。什么叫使用直接量，比如，JavaScript支持使用[param,param,param,...]來(lái)直接表達一個(gè)數組，以往我們都使用new Array(param,param,...)，使用前者是引擎直接解釋的，后者要調用一個(gè)Array內部構造器，所以要略微快一點(diǎn)點(diǎn)。
同樣，var foo = {}的方式也比var foo = new Object();快，var reg = /../;要比var reg=new RegExp()快。
對字符串進(jìn)行循環(huán)操作，譬如替換、查找，應使用正則表達式，因為本身JavaScript的循環(huán)速度就比較慢，而正則表達式的操作是用C寫(xiě)成的語(yǔ)言的API，性能很好。
自定義高級對象和Date、RegExp對象在構造時(shí)都會(huì )消耗大量時(shí)間。如果可以復用，應采用緩存的方式。
很多人喜歡在JavaScript中使用document.write來(lái)給頁(yè)面生成內容。事實(shí)上這樣的效率較低，如果需要直接插入HTML，可以找一個(gè)容器元素，比如指定一個(gè)div或者span，并設置他們的innerHTML來(lái)將自己的HTML代碼插入到頁(yè)面中。
使用[“”]查詢(xún)要比.items()更快，這和前面的減少對象查找的思路是一樣的，調用.items()增加了一次查詢(xún)和函數的調用。
通常我們可能會(huì )使用字符串直接寫(xiě)HTML來(lái)創(chuàng )建節點(diǎn)，其實(shí)這樣做
無(wú)法保證代碼的有效性
字符串操作效率低
所以應該是用document.createElement()方法，而如果文檔中存在現成的樣板節點(diǎn)，應該是用cloneNode()方法，因為使用createElement()方法之后，你需要設置多次元素的屬性，使用cloneNode()則可以減少屬性的設置次數——同樣如果需要創(chuàng )建很多元素，應該先準備一個(gè)樣板節點(diǎn)。
如果針對的是不斷運行的代碼，不應該使用setTimeout，而應該是用setInterval。setTimeout每次要重新設置一個(gè)定時(shí)器。
據我測試Microsoft的JScript的效率較Mozilla的Spidermonkey要差很多，無(wú)論是執行速度還是內存管理上，因為JScript現在基本也不更新了。但SpiderMonkey不能使用ActiveXObject
文件優(yōu)化也是一個(gè)很有效的手段，刪除所有的空格和注釋?zhuān)汛a放入一行內，可以加快下載的速度，注意，是下載的速度而不是解析的速度，如果是本地，注釋和空格并不會(huì )影響解釋和執行速度。
本文總結了我在JavaScript編程中所找到的提高JavaScript運行性能的一些方法，其實(shí)這些經(jīng)驗都基于幾條原則：
直接拿手頭現成的東西比較快，如局部變量比全局變量快，直接量比運行時(shí)構造對象快等等。
盡可能少地減少執行次數，比如先緩存需要多次查詢(xún)的。
盡可能使用語(yǔ)言?xún)戎玫墓δ?，比如串鏈接?/p>
盡可能使用系統提供的API，因為這些API是編譯好的二進(jìn)制代碼，執行效率很高
同時(shí)，一些基本的算法上的優(yōu)化，同樣可以用在JavaScript中，比如運算結構的調整，這里就不再贅述了。但是由于JavaScript是解釋型的，一般不會(huì )在運行時(shí)對字節碼進(jìn)行優(yōu)化，所以這些優(yōu)化仍然是很重要的。
當然，其實(shí)這里的一些技巧同樣使用在其他的一些解釋型語(yǔ)言中，大家也可以進(jìn)行參考。
由于是以前做過(guò)的測試，測試代碼已經(jīng)不全，我補充了一部分如下：
聯(lián)系客服
