要如何作效率優化呢?因為 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] + "_"; }
當中有幾個影響效率的問題:
- 過渡的使用 getElementById 搜尋 DOM 物件,尤其是在 for 迴圈中
- 大量的存取 length、innerHTML 等成員變數
- 多次的存取 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 回應:
写得好。
張貼留言