JavaScript腳本性能的優(yōu)化方法

更新時(shí)間：2007年02月02日 00:00:00 作者：

JavaScript是一種解釋型語(yǔ)言，所以能無(wú)法達(dá)到和C/Java之類(lèi)的水平，限制了它能在客戶端所做的事情，為了能改進(jìn)他的性能，我想基于我以前給JavaScript做過(guò)的很多測(cè)試來(lái)談?wù)勛约旱慕?jīng)驗(yàn)，希望能幫助大家改進(jìn)自己的JavaScript腳本性能。

From:http://www.nirvanastudio.org/javascript/improve-javascript-performance.html

作者：ShiningRay @ Nirvana Studio

隨著網(wǎng)絡(luò)的發(fā)展，網(wǎng)速和機(jī)器速度的提高，越來(lái)越多的網(wǎng)站用到了豐富客戶端技術(shù)。而現(xiàn)在Ajax則是最為流行的一種方式。JavaScript是一種解釋型語(yǔ)言，所以能無(wú)法達(dá)到和C/Java之類(lèi)的水平，限制了它能在客戶端所做的事情，為了能改進(jìn)他的性能，我想基于我以前給JavaScript做過(guò)的很多測(cè)試來(lái)談?wù)勛约旱慕?jīng)驗(yàn)，希望能幫助大家改進(jìn)自己的JavaScript腳本性能。

語(yǔ)言層次方面
循環(huán)
循環(huán)是很常用的一個(gè)控制結(jié)構(gòu)，大部分東西要依靠它來(lái)完成，在JavaScript中，我們可以使用for(;;),while(),for(in)三種循環(huán)，事實(shí)上，這三種循環(huán)中for(in)的效率極差，因?yàn)樗枰樵?xún)散列鍵，只要可以就應(yīng)該盡量少用。for(;;)和while循環(huán)的性能應(yīng)該說(shuō)基本（平時(shí)使用時(shí)）等價(jià)。

而事實(shí)上，如何使用這兩個(gè)循環(huán)，則有很大講究。我在測(cè)試中有些很有意思的情況，見(jiàn)附錄。最后得出的結(jié)論是：

如果是循環(huán)變量遞增或遞減，不要單獨(dú)對(duì)循環(huán)變量賦值，應(yīng)該在它最后一次讀取的時(shí)候使用嵌套的++或—操作符。

如果要與數(shù)組的長(zhǎng)度作比較，應(yīng)該事先把數(shù)組的length屬性放入一個(gè)局部變量中，減少查詢(xún)次數(shù)。

局部變量和全局變量
局部變量的速度要比全局變量的訪問(wèn)速度更快，因?yàn)槿肿兞科鋵?shí)是全局對(duì)象的成員，而局部變量是放在函數(shù)的棧當(dāng)中的。

不使用Eval
使用eval相當(dāng)于在運(yùn)行時(shí)再次調(diào)用解釋引擎對(duì)內(nèi)容進(jìn)行運(yùn)行，需要消耗大量時(shí)間。這時(shí)候使用JavaScript所支持的閉包可以實(shí)現(xiàn)函數(shù)模版（關(guān)于閉包的內(nèi)容請(qǐng)參考函數(shù)式編程的有關(guān)內(nèi)容）

減少對(duì)象查找
因?yàn)镴avaScript的解釋性，所以a.b.c.d.e，需要進(jìn)行至少4次查詢(xún)操作，先檢查a再檢查a中的b，再檢查b中的c，如此往下。所以如果這樣的表達(dá)式重復(fù)出現(xiàn)，只要可能，應(yīng)該盡量少出現(xiàn)這樣的表達(dá)式，可以利用局部變量，把它放入一個(gè)臨時(shí)的地方進(jìn)行查詢(xún)。

這一點(diǎn)可以和循環(huán)結(jié)合起來(lái)，因?yàn)槲覀兂３Ｒ鶕?jù)字符串、數(shù)組的長(zhǎng)度進(jìn)行循環(huán)，而通常這個(gè)長(zhǎng)度是不變的，比如每次查詢(xún)a.length，就要額外進(jìn)行一個(gè)操作，而預(yù)先把var len=a.length，則就少了一次查詢(xún)。

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

如果要連接多個(gè)字符串，應(yīng)該少使用+=，如

s+=a;s+=b;s+=c;應(yīng)該寫(xiě)成

s+=a + b + c；而如果是收集字符串，比如多次對(duì)同一個(gè)字符串進(jìn)行+=操作的話，最好使用一個(gè)緩存。怎么用呢？使用JavaScript數(shù)組來(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)型轉(zhuǎn)換
類(lèi)型轉(zhuǎn)換是大家常犯的錯(cuò)誤，因?yàn)镴avaScript是動(dòng)態(tài)類(lèi)型語(yǔ)言，你不能指定變量的類(lèi)型。

1. 把數(shù)字轉(zhuǎn)換成字符串，應(yīng)用"" + 1，雖然看起來(lái)比較丑一點(diǎn)，但事實(shí)上這個(gè)效率是最高的，性能上來(lái)說(shuō)：

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

這條其實(shí)和下面的“直接量”有點(diǎn)類(lèi)似，盡量使用編譯時(shí)就能使用的內(nèi)部操作要比運(yùn)行時(shí)使用的用戶操作要快。

String()屬于內(nèi)部函數(shù)，所以速度很快，而.toString()要查詢(xún)?cè)椭械暮瘮?shù)，所以速度遜色一些，new String()用于返回一個(gè)精確的副本。

2. 浮點(diǎn)數(shù)轉(zhuǎn)換成整型，這個(gè)更容易出錯(cuò)，很多人喜歡使用parseInt()，其實(shí)parseInt()是用于將字符串轉(zhuǎn)換成數(shù)字，而不是浮點(diǎn)數(shù)和整型之間的轉(zhuǎn)換，我們應(yīng)該使用Math.floor()或者M(jìn)ath.round()。

另外，和第二節(jié)的對(duì)象查找中的問(wèn)題不一樣，Math是內(nèi)部對(duì)象，所以Math.floor()其實(shí)并沒(méi)有多少查詢(xún)方法和調(diào)用的時(shí)間，速度是最快的。

3. 對(duì)于自定義的對(duì)象，如果定義了toString()方法來(lái)進(jìn)行類(lèi)型轉(zhuǎn)換的話，推薦顯式調(diào)用toString()，因?yàn)閮?nèi)部的操作在嘗試所有可能性之后，會(huì)嘗試對(duì)象的toString()方法嘗試能否轉(zhuǎn)化為String，所以直接調(diào)用這個(gè)方法效率會(huì)更高

使用直接量
其實(shí)這個(gè)影響倒比較小，可以忽略。什么叫使用直接量，比如，JavaScript支持使用[param,param,param,...]來(lái)直接表達(dá)一個(gè)數(shù)組，以往我們都使用new Array(param,param,...)，使用前者是引擎直接解釋的，后者要調(diào)用一個(gè)Array內(nèi)部構(gòu)造器，所以要略微快一點(diǎn)點(diǎn)。

同樣，var foo = {}的方式也比var foo = new Object();快，var reg = /../;要比var reg=new RegExp()快。

字符串遍歷操作
對(duì)字符串進(jìn)行循環(huán)操作，譬如替換、查找，應(yīng)使用正則表達(dá)式，因?yàn)楸旧鞪avaScript的循環(huán)速度就比較慢，而正則表達(dá)式的操作是用C寫(xiě)成的語(yǔ)言的API，性能很好。

高級(jí)對(duì)象
自定義高級(jí)對(duì)象和Date、RegExp對(duì)象在構(gòu)造時(shí)都會(huì)消耗大量時(shí)間。如果可以復(fù)用，應(yīng)采用緩存的方式。

DOM相關(guān)
插入HTML
很多人喜歡在JavaScript中使用document.write來(lái)給頁(yè)面生成內(nèi)容。事實(shí)上這樣的效率較低，如果需要直接插入HTML，可以找一個(gè)容器元素，比如指定一個(gè)div或者span，并設(shè)置他們的innerHTML來(lái)將自己的HTML代碼插入到頁(yè)面中。

對(duì)象查詢(xún)
使用[“”]查詢(xún)要比.items()更快，這和前面的減少對(duì)象查找的思路是一樣的，調(diào)用.items()增加了一次查詢(xún)和函數(shù)的調(diào)用。

創(chuàng)建DOM節(jié)點(diǎn)
通常我們可能會(huì)使用字符串直接寫(xiě)HTML來(lái)創(chuàng)建節(jié)點(diǎn)，其實(shí)這樣做

無(wú)法保證代碼的有效性

字符串操作效率低

所以應(yīng)該是用document.createElement()方法，而如果文檔中存在現(xiàn)成的樣板節(jié)點(diǎn)，應(yīng)該是用cloneNode()方法，因?yàn)槭褂胏reateElement()方法之后，你需要設(shè)置多次元素的屬性，使用cloneNode()則可以減少屬性的設(shè)置次數(shù)——同樣如果需要?jiǎng)?chuàng)建很多元素，應(yīng)該先準(zhǔn)備一個(gè)樣板節(jié)點(diǎn)。

定時(shí)器
如果針對(duì)的是不斷運(yùn)行的代碼，不應(yīng)該使用setTimeout，而應(yīng)該是用setInterval。setTimeout每次要重新設(shè)置一個(gè)定時(shí)器。

其他
腳本引擎
據(jù)我測(cè)試Microsoft的JScript的效率較Mozilla的Spidermonkey要差很多，無(wú)論是執(zhí)行速度還是內(nèi)存管理上，因?yàn)镴Script現(xiàn)在基本也不更新了。但SpiderMonkey不能使用ActiveXObject

文件優(yōu)化
文件優(yōu)化也是一個(gè)很有效的手段，刪除所有的空格和注釋?zhuān)汛a放入一行內(nèi)，可以加快下載的速度，注意，是下載的速度而不是解析的速度，如果是本地，注釋和空格并不會(huì)影響解釋和執(zhí)行速度。

總結(jié)
本文總結(jié)了我在JavaScript編程中所找到的提高JavaScript運(yùn)行性能的一些方法，其實(shí)這些經(jīng)驗(yàn)都基于幾條原則：

直接拿手頭現(xiàn)成的東西比較快，如局部變量比全局變量快，直接量比運(yùn)行時(shí)構(gòu)造對(duì)象快等等。

盡可能少地減少執(zhí)行次數(shù)，比如先緩存需要多次查詢(xún)的。

盡可能使用語(yǔ)言?xún)?nèi)置的功能，比如串鏈接。

盡可能使用系統(tǒng)提供的API，因?yàn)檫@些API是編譯好的二進(jìn)制代碼，執(zhí)行效率很高

同時(shí)，一些基本的算法上的優(yōu)化，同樣可以用在JavaScript中，比如運(yùn)算結(jié)構(gòu)的調(diào)整，這里就不再贅述了。但是由于JavaScript是解釋型的，一般不會(huì)在運(yùn)行時(shí)對(duì)字節(jié)碼進(jìn)行優(yōu)化，所以這些優(yōu)化仍然是很重要的。

當(dāng)然，其實(shí)這里的一些技巧同樣使用在其他的一些解釋型語(yǔ)言中，大家也可以進(jìn)行參考。

參考
http://www.umsu.de/jsperf/ 各種瀏覽器的測(cè)試對(duì)比

http://home.earthlink.net/~kendrasg/info/js_opt/

附錄1
由于是以前做過(guò)的測(cè)試，測(cè)試代碼已經(jīng)不全，我補(bǔ)充了一部分如下：

復(fù)制代碼代碼如下:

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=0 
start = (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=0 
start = (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：

復(fù)制代碼代碼如下:

for(var i=0;i<100;i++){ 
arr[i]=0; 
} 

代碼2：

復(fù)制代碼代碼如下:

var i = 0; 
while(i < 100){ 
arr[i++]=0; 
} 

代碼3：

復(fù)制代碼代碼如下:

var i = 0; 
while(i < 100){ 
arr[i]=0; 
i++; 
} 

在firefox下測(cè)試這兩段代碼，結(jié)果是代碼2優(yōu)于代碼1和3，而代碼1一般優(yōu)于代碼3，有時(shí)會(huì)被代碼3超過(guò)；而在IE 6.0下，測(cè)試壓力較大的時(shí)候（如測(cè)試10000次以上）代碼2和3則有時(shí)候優(yōu)于代碼1，有時(shí)候就會(huì)遠(yuǎn)遠(yuǎn)落后代碼1，而在測(cè)試壓力較小（如5000次），則代碼2>代碼3>代碼1。

代碼4：

復(fù)制代碼代碼如下:

var i = 0; 
var a; 
while(i < 100){ 
a = 0; 
i++; 
} 

代碼5：

復(fù)制代碼代碼如下:

var a; 
for(var i=0;i<100;i++){ 
a = 0; 
}

上面兩段代碼在Firefox和IE下測(cè)試結(jié)果都是性能接近的。

代碼6：

復(fù)制代碼代碼如下:

var a; 
var i=0; 
while(i<100){ 
a=i; 
i++; 
} 

代碼7：

復(fù)制代碼代碼如下:

var a; 
var i=0; 
while(i<100){ 
a=i++; 
} 

代碼8：

復(fù)制代碼代碼如下:

var a; 
for(var i=0;i<100;i++){ 
a = i; 
} 

代碼9：

復(fù)制代碼代碼如下:

var a; 
for(var i=0;i<100;){ 
a = i++; 
}

這四段代碼在Firefox下6和8的性能接近，7和9的性能接近，而6, 8 < 7, 9；

最后我們來(lái)看一下空循環(huán)

代碼10：

    for(var i=0;i<100;i++){   }

代碼11：

    var i;
    while(i<100){        i++;    }
最后的測(cè)試出現(xiàn)了神奇的結(jié)果，F(xiàn)irefox下代碼10所花的時(shí)間與代碼11所花的大約是24:1。所以它不具備參考價(jià)值，于是我沒(méi)有放在一開(kāi)始給大家看。

您可能感興趣的文章: