2008-05-03

JavaScript 效率優化

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

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

下面有一個效率很差的例子:
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],這跟上一個差不多



這些問題的修改方法:
/*利用暫存變數作處理*/
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による参照速度比較
シリアルサーチと正規表現の速度比較

1 回應:

匿名 提到...

写得好。