JavaScript 效率優化

最近開始重視 JavaScript 的效率問題，原因在於感到自己寫的網頁越來越不流暢，其中大量的計算跟無法避免的迴圈愈來愈多，加上 UI 介面跟動態效果的需要，使得瀏覽器的負荷過大，所以這是個需要重視的問題，這直接的影響網站名聲的好壞。

要如何作效率優化呢？因為 JavaScript 是直譯語言，無法透過編譯器加以優化，所以只能從撰寫方式下手。

下面有一個效率很差的例子：

原始碼

1. for (var i=0; i<data.length; i++) { 
2.    document.getElementById("link").innerHTML += data[i]; 
3.    document.getElementById("link").hreh += "&" + data[i]; 
4.    document.getElementById("link").title += data[i] + ","; 
5.    document.getElementById("link").className += data[i] + " "; 
6.    document.getElementById("link").name += data[i] + "_"; 
7. } 

for (var i=0; i<data.length; i++) {
    document.getElementById("link").innerHTML += data[i];
    document.getElementById("link").hreh += "&" + data[i];
    document.getElementById("link").title += data[i] + ",";
    document.getElementById("link").className += data[i] + " ";
    document.getElementById("link").name += data[i] + "_";
}

當中有幾個影響效率的問題：

1. 過渡的使用 getElementById 搜尋 DOM 物件，尤其是在 for 迴圈中
2. 大量的存取 length、innerHTML 等成員變數
3. 多次的存取 data[i]，這跟上一個差不多

這些問題的修改方法：

原始碼

1. /*利用暫存變數作處理*/ 
2. var temp1='', temp2='', temp3='', temp4='', temp5=''; 
3.  
4. /*利用 l 紀錄 length 的值，以避免多次存取成員變數*/ 
5. for (var i=0,l=data.length; i<l; i++) { 
6.    /*利用 d 紀錄 data[i] 的值，以避免多次存取成員變數*/ 
7.    d = data[i]; 
8.    temp1 += d; 
9.    temp2 += "&" + d; 
10.    temp3 += d + ","; 
11.    temp4 += d + " "; 
12.    temp5 += d + "_"; 
13. } 
14.  
15. /*利用暫存變數紀錄 DOM 物件*/ 
16. var link = document.getElementById("link"); 
17. link.innerHTML += temp1; 
18. link.hreh += temp2; 
19. link.title += temp3; 
20. link.className += temp4; 
21. link.name += temp5; 

/*利用暫存變數作處理*/
var temp1='', temp2='', temp3='', temp4='', temp5='';

/*利用 l 紀錄 length 的值，以避免多次存取成員變數*/
for (var i=0,l=data.length; i<l; i++) {
    /*利用 d 紀錄 data[i] 的值，以避免多次存取成員變數*/
    d = data[i];
    temp1 += d;
    temp2 += "&" + d;
    temp3 += d + ",";
    temp4 += d + " ";
    temp5 += d + "_";
}

/*利用暫存變數紀錄 DOM 物件*/
var link = document.getElementById("link");
link.innerHTML += temp1;
link.hreh += temp2;
link.title += temp3;
link.className += temp4;
link.name += temp5;

實驗 1000 筆資料的結果：
第 1 個耗時：5625(msec)
第 2 個耗時：47(msec)
展示(demo)

參考來源：
JavaScript loop performance
随時innerHTMLに書き込んだ場合と一括して書き込んだ場合
innerHTMLとinnerText/textContentの速度比較
getElementByID、変数、withによる参照速度比較
シリアルサーチと正規表現の速度比較