優(yōu)化JavaScript腳本的性能
更新時間：2012-01-20 | 發(fā)布人：本站 | 點擊率：721 次
隨著網(wǎng)絡(luò)的發(fā)展，網(wǎng)速和機器速度的提高，越來越多的網(wǎng)站用到了豐富客戶端技術(shù)。而現(xiàn)在Ajax則是最為流行的一種方式。javascript是一種解釋型語言，所以能無法達到和C/Java之類的水平，限制了它能在客戶端所做的事情，為了能改進他的性能，我想基于我以前給JavaScript做過的很多測試來談?wù)勛约旱慕?jīng)驗，希望能幫助大家改進自己的JavaScript腳本性能。
語言層次方面
循環(huán)
循環(huán)是很常用的一個控制結(jié)構(gòu)，大部分東西要依靠它來完成，在JavaScript中，我們可以使用for(;;),while(),for(in)三種循環(huán)，事實上，這三種循環(huán)中for(in)的效率極差，因為他需要查詢散列鍵，只要可以就應該盡量少用。for(;;)和while循環(huán)的性能應該說基本(平時使用時)等價。
而事實上，如何使用這兩個循環(huán)，則有很大講究。我在測試中有些很有意思的情況，見附錄。最后得出的結(jié)論是：
如果是循環(huán)變量遞增或遞減，不要單獨對循環(huán)變量賦值，應該在它最后一次讀取的時候使用嵌套的++或—操作符。
如果要與數(shù)組的長度作比較，應該事先把數(shù)組的length屬性放入一個局部變量中，減少查詢次數(shù)。
局部變量和全局變量
局部變量的速度要比全局變量的訪問速度更快，因為全局變量其實是全局對象的成員，而局部變量是放在函數(shù)的棧當中的。
不使用Eval
使用eval相當于在運行時再次調(diào)用解釋引擎對內(nèi)容進行運行，需要消耗大量時間。這時候使用JavaScript所支持的閉包可以實現(xiàn)函數(shù)模版(關(guān)于閉包的內(nèi)容請參考函數(shù)式編程的有關(guān)內(nèi)容)
減少對象查找
因為JavaScript的解釋性，所以a.b.c.d.e，需要進行至少4次查詢操作，先檢查a再檢查a中的b，再檢查b中的c，如此往下。所以如果這樣的表達式重復出現(xiàn)，只要可能，應該盡量少出現(xiàn)這樣的表達式，可以利用局部變量，把它放入一個臨時的地方進行查詢。
這一點可以和循環(huán)結(jié)合起來，因為我們常常要根據(jù)字符串、數(shù)組的長度進行循環(huán)，而通常這個長度是不變的，比如每次查詢a.length，就要額外進行一個操作，而預先把var len=a.length，則就少了一次查詢。
字符串連接
如果是追加字符串，最好使用s+=anotherStr操作，而不是要使用s=s+anotherStr。
如果要連接多個字符串，應該少使用+=，如
s+=a;s+=b;s+=c;
應該寫成
s+=a + b + c;
而如果是收集字符串，比如多次對同一個字符串進行+=操作的話，最好使用一個緩存。怎么用呢?使用JavaScript數(shù)組來收集，最后使用join方法連接起來，如下
var buf = new Array();for(var i = 0; i < 100; i++){ buf.push(i.toString());}var all = buf.join("");
類型轉(zhuǎn)換
類型轉(zhuǎn)換是大家常犯的錯誤，因為JavaScript是動態(tài)類型語言，你不能指定變量的類型。
1. 把數(shù)字轉(zhuǎn)換成字符串，應用"" + 1，雖然看起來比較丑一點，但事實上這個效率是最高的，性能上來說：
("" +) > String() > .toString() > new String()
這條其實和下面的“直接量”有點類似，盡量使用編譯時就能使用的內(nèi)部操作要比運行時使用的用戶操作要快。
String()屬于內(nèi)部函數(shù)，所以速度很快，而.toString()要查詢原型中的函數(shù)，所以速度遜色一些，new String()用于返回一個精確的副本。
2. 浮點數(shù)轉(zhuǎn)換成整型，這個更容易出錯，很多人喜歡使用parseInt()，其實parseInt()是用于將字符串轉(zhuǎn)換成數(shù)字，而不是浮點數(shù)和整型之間的轉(zhuǎn)換，我們應該使用Math.floor()或者Math.round()。
另外，和第二節(jié)的對象查找中的問題不一樣，Math是內(nèi)部對象，所以Math.floor()其實并沒有多少查詢方法和調(diào)用的時間，速度是最快的。
3. 對于自定義的對象，如果定義了toString()方法來進行類型轉(zhuǎn)換的話，推薦顯式調(diào)用toString()，因為內(nèi)部的操作在嘗試所有可能性之后，會嘗試對象的toString()方法嘗試能否轉(zhuǎn)化為String，所以直接調(diào)用這個方法效率會更高。
使用直接量
其實這個影響倒比較小，可以忽略。什么叫使用直接量，比如，JavaScript支持使用[param,param,param,...]來直接表達一個數(shù)組，以往我們都使用new Array(param,param,...)，使用前者是引擎直接解釋的，后者要調(diào)用一個Array內(nèi)部構(gòu)造器，所以要略微快一點點。
同樣，var foo = {}的方式也比var foo = new Object();快，var reg = /../;要比var reg=new RegExp()快。
字符串遍歷操作
對字符串進行循環(huán)操作，譬如替換、查找，應使用正則表達式，因為本身JavaScript的循環(huán)速度就比較慢，而正則表達式的操作是用C寫成的語言的API，性能很好。
高級對象
自定義高級對象和Date、RegExp對象在構(gòu)造時都會消耗大量時間。如果可以復用，應采用緩存的方式。
DOM相關(guān)
插入HTML
很多人喜歡在JavaScript中使用document.write來給頁面生成內(nèi)容。事實上這樣的效率較低，如果需要直接插入HTML，可以找一個容器元素，比如指定一個div或者span，并設(shè)置他們的innerHTML來將自己的HTML代碼插入到頁面中。
對象查詢
使用[“”]查詢要比.items()更快，這和前面的減少對象查找的思路是一樣的，調(diào)用.items()增加了一次查詢和函數(shù)的調(diào)用。
創(chuàng)建DOM節(jié)點
通常我們可能會使用字符串直接寫HTML來創(chuàng)建節(jié)點，其實這樣做
無法保證代碼的有效性
字符串操作效率低
所以應該是用document.createElement()方法，而如果文檔中存在現(xiàn)成的樣板節(jié)點，應該是用cloneNode()方法，因為使用createElement()方法之后，你需要設(shè)置多次元素的屬性，使用cloneNode()則可以減少屬性的設(shè)置次數(shù)——同樣如果需要創(chuàng)建很多元素，應該先準備一個樣板節(jié)點。
定時器
如果針對的是不斷運行的代碼，不應該使用setTimeout，而應該是用setInterval。setTimeout每次要重新設(shè)置一個定時器。
其他
腳本引擎
據(jù)我測試Microsoft的JScript的效率較Mozilla的Spidermonkey要差很多，無論是執(zhí)行速度還是內(nèi)存管理上，因為JScript現(xiàn)在基本也不更新了。但SpiderMonkey不能使用ActiveXObject
文件優(yōu)化
文件優(yōu)化也是一個很有效的手段，刪除所有的空格和注釋，把代碼放入一行內(nèi)，可以加快下載的速度，注意，是下載的速度而不是解析的速度，如果是本地，注釋和空格并不會影響解釋和執(zhí)行速度。
總結(jié)
本文總結(jié)了我在JavaScript編程中所找到的提高JavaScript運行性能的一些方法，其實這些經(jīng)驗都基于幾條原則：
直接拿手頭現(xiàn)成的東西比較快，如局部變量比全局變量快，直接量比運行時構(gòu)造對象快等等。
盡可能少地減少執(zhí)行次數(shù)，比如先緩存需要多次查詢的。
盡可能使用語言內(nèi)置的功能，比如串鏈接。
盡可能使用系統(tǒng)提供的API，因為這些API是編譯好的二進制代碼，執(zhí)行效率很高
同時，一些基本的算法上的優(yōu)化，同樣可以用在JavaScript中，比如運算結(jié)構(gòu)的調(diào)整，這里就不再贅述了。但是由于JavaScript是解釋型的，一般不會在運行時對字節(jié)碼進行優(yōu)化，所以這些優(yōu)化仍然是很重要的。
當然，其實這里的一些技巧同樣使用在其他的一些解釋型語言中，大家也可以進行參考。
參考
http://www.umsu.de/jsperf/ 各種瀏覽器的測試對比
http://home.earthlink.net/~kendrasg/info/js_opt/
附錄1
由于是以前做過的測試，測試代碼已經(jīng)不全，我補充了一部分如下：
var print;if(typeof document != "undefined" ){ print = function(){ document.write(arguments[0]); }}else if(typeof WScript != "undefined" ){ print = function(){ WScript.Echo(arguments[0],arguments[1],arguments[2]); }}function empty(){}function benchmark(f){ var i = 0; var start = (new Date()).getTime(); while(i < pressure){ f(i++); } var end = (new Date()).getTime(); WScript.Echo(end-start);}/*i=0start = (new Date()).getTime();while(i < 60000){ c = [i,i,i,i,i,i,i,i,i,i]; i++;}end = (new Date()).getTime();WScript.Echo(end-start);i=0start = (new Date()).getTime();while(i < 60000){ c = new Array(i,i,i,i,i,i,i,i,i,i); i++;}var end = (new Date()).getTime();WScript.Echo(end-start);*/function internCast(i){ return "" + i;}function StringCast(i){ return String(i)}function newStringCast(i){ return new String(i)}function toStringCast(i){ return i.toString();}function ParseInt(){ return parseInt(j);}function MathFloor(){ return Math.floor(j);}function Floor(){ return floor(j);}var pressure = 50000;var a = "";var floor = Math.floor;j = 123.123;print("-------------\nString Conversion Test");print("The empty:", benchmark(empty));print("intern:", benchmark(internCast));print("String:");benchmark(StringCast);print("new String:");benchmark(newStringCast);print("toString:");benchmark(toStringCast);print("-------------\nFloat to Int Conversion Test");print("parseInt");benchmark(ParseInt);print("Math.floor");benchmark(MathFloor);print("floor")benchmark(Floor);function newObject(){ return new Object();}function internObject(){ return {};}print("------------\nliteral Test");print("runtime new object", benchmark(newObject));print("literal object", benchmark(internObject));
附錄2
代碼1：
for(var i=0;i<100;i++){ arr[i]=0; }
代碼2：
var i = 0; while(i < 100){ arr[i++]=0; }
代碼3：
var i = 0; while(i < 100){ arr[i]=0; i++; }
在firefox下測試這兩段代碼，結(jié)果是代碼2優(yōu)于代碼1和3，而代碼1一般優(yōu)于代碼3，有時會被代碼3超過;而在IE 6.0下，測試壓力較大的時候(如測試10000次以上)代碼2和3則有時候優(yōu)于代碼1，有時候就會遠遠落后代碼1，而在測試壓力較小(如5000次)，則代碼2>代碼3>代碼1。
代碼4：
var i = 0; var a; while(i < 100){ a = 0; i++; }
代碼5：
var a; for(var i=0;i<100;i++){ a = 0; }
上面兩段代碼在Firefox和IE下測試結(jié)果都是性能接近的。
代碼6：
var a; var i=0; while(i<100){ a=i; i++; }
代碼7：
var a; var i=0; while(i<100){ a=i++; }
代碼8：
var a; for(var i=0;i<100;i++){ a = i; }
代碼9：
var a; for(var i=0;i<100;){ a = i++; }
這四段代碼在Firefox下6和8的性能接近，7和9的性能接近，而6, 8 < 7, 9;
最后我們來看一下空循環(huán)
代碼10：
for(var i=0;i<100;i++){ }
代碼11：
var i; while(i<100){ i++; }
最后的測試出現(xiàn)了神奇的結(jié)果，F(xiàn)irefox下代碼10所花的時間與代碼11所花的大約是24:1。所以它不具備參考價值，于是我沒有放在一開始給大家看。
渝公網(wǎng)安備 50024202000196號
域名注冊知識
虛擬主機知識
網(wǎng)站建設(shè)知識
網(wǎng)絡(luò)推廣知識
網(wǎng)絡(luò)營銷知識
常見技術(shù)問題
QQ空間
新浪微博
開心網(wǎng)
人人網(wǎng)