JavaScript強化教程——DOM編程性能優化

本文爲 H5EDU 機構官方 HTML5培訓 教程，主要介紹：JavaScript強化教程 ——DOM編程性能優化
 
DOM的訪問與修改
訪問DOM元素是有代價的——修改元素側更爲昂貴，由於他會致使瀏覽器從新計算頁面的幾何變化。
固然，最壞的狀況是在循環中訪問或修改元素，尤爲是對HTML元素幾何循環操做。
爲了讓你對DOM編程帶來的性能問題有個量化的瞭解，請看下面的簡單實例：

function innerHTMLLoop(){
for(var count = 0;count<15000;count++){
document.getElementById('here').INNERhtml+='a';
    }
}

這個函數循環修改頁面元素的內容。這段代碼的問題在於，每次循環迭送，該元素都被訪問兩次：一次讀取innerHTML屬性值，另外一次重寫它。
換一種效率更高的方法，用局部變量存儲修改中的內容，在循環結束後一次性寫入：

function innerHTMLLoop2(){
var content = '';
for(var count = 0;count<15000;count++){
count +='a';
document.getElementById('here').innerHTML+=content;
    }
}

在全部瀏覽器中，修改後的版本都運行的更快。使用innerHTMLLoop2比用innerHTMLLoop（）快155倍
因此儘可能多使用JavaScript，少調用document。會顯著提高性能和速度。

點擊進入JS強化教程