網頁教程：如何最佳化JavaScript指令碼的效能

javascript|指令碼|教程|網頁|效能|最佳化

作者：ShiningRay @ Nirvana Studio

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

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

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

如果是迴圈變數遞增或遞減，不要單獨對迴圈變數賦值，應該在它最後一次讀取的時候使用嵌套的++或—操作符。

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

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

不使用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，所以直接調用這個方法效率會更高

使用直接量
其實這個影響倒比較小，可以忽略。什麼叫使用直接量，比如，JavaScript支援使用[param,param,param,...]來直接表達一個數組，以往我們都使用new Array(param,param,...)，使用前者是引擎直接解釋的，後者要調用一個Array內部構造器，所以要略微快一點點。

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

字串遍曆操作
對字串進行迴圈操作，譬如替換、尋找，應使用Regex，因為本身JavaScript的迴圈速度就比較慢，而Regex的操作是用C寫成的語言的API，效能很好。

進階對象
自訂進階對象和Date、RegExp對象在構造時都會消耗大量時間。如果可以複用，應採用緩衝的方式。

DOM相關
插入HTML
很多人喜歡在JavaScript中使用document.write來給頁面產生內容。事實上這樣的效率較低，如果需要直接插入HTML，可以找一個容器元素，比如指定一個div或者span，並設定他們的innerHTML來將自己的HTML代碼插入到頁面中。

物件查詢
使用[“”]查詢要比.items()更快，這和前面的減少對象尋找的思路是一樣的，調用.items()增加了一次查詢和函數的調用。

建立DOM節點
通常我們可能會使用字串直接寫HTML來建立節點，其實這樣做

無法保證代碼的有效性

字串操作效率低

所以應該是用document.createElement()方法，而如果文檔中存在現成的樣板節點，應該是用cloneNode()方法，因為使用createElement()方法之後，你需要設定多次元素的屬性，使用cloneNode()則可以減少屬性的設定次數——同樣如果需要建立很多元素，應該先準備一個樣板節點。

定時器
如果針對的是不斷啟動並執行代碼，不應該使用setTimeout，而應該是用setInterval。setTimeout每次要重新設定一個定時器。

其他
指令碼引擎
據我測試Microsoft的JScript的效率較Mozilla的Spidermonkey要差很多，無論是執行速度還是記憶體管理上，因為JScript現在基本也不更新了。但SpiderMonkey不能使用ActiveXObject

檔案最佳化
檔案最佳化也是一個很有效手段，刪除所有的空格和注釋，把代碼放入一行內，可以加快下載的速度，注意，是下載的速度而不是解析的速度，如果是本地，注釋和空格並不會影響解釋和執行速度。

總結
本文總結了我在JavaScript編程中所找到的提高JavaScript運行效能的一些方法，其實這些經驗都基於幾條原則：

直接拿手頭現成的東西比較快，如局部變數比全域變數快，直接量比運行時構造對象快等等。

儘可能少地減少執行次數，比如先緩衝需要多次查詢的。

儘可能使用語言內建的功能，比如串連結。

儘可能使用系統提供的API，因為這些API是編譯好的二進位代碼，執行效率很高

同時，一些基本的演算法上的最佳化，同樣可以用在JavaScript中，比如運算結構的調整，這裡就不再贅述了。但是由於JavaScript是解釋型的，一般不會在運行時對位元組碼進行最佳化，所以這些最佳化仍然是很重要的。

當然，其實這裡的一些技巧同樣使用在其他的一些解釋型語言中，大家也可以進行參考。

參考
http://www.umsu.de/jsperf/ 各種瀏覽器的測試對比

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

附錄1
由於是以前做過的測試，測試代碼已經不全，我補充了一部分如下：

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下測試這兩段代碼，結果是代碼2優於代碼1和3，而代碼1一般優於代碼3，有時會被代碼3超過；而在IE 6.0下，測試壓力較大的時候（如測試10000次以上）代碼2和3則有時候優於代碼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下測試結果都是效能接近的。

代碼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；

最後我們來看一下空迴圈

代碼10：

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

 代碼11：

    var i;    while(i<100){        i++;    }
最後的測試出現了神奇的結果，Firefox下代碼10所花的時間與代碼11所花的大約是24:1。所以它不具備參考價值，於是我沒有放在一開始給大家看。