減少訪問DOM的次數提升javascript效能

減少訪問DOM的次數提升javascript效能

 訪問DOM元素是有代價的，修改DOM元素則更為昂貴，因為它會導致瀏覽器重新計算頁面的幾何變化。 

 

當然，最壞的情況是在迴圈中訪問修改元素，尤其是對HTML元素集合迴圈操作。 

 

例如： 

 代碼如下:

<!-- 最佳化前 --> 

<script type="text/javascript"> 

function innerHTMLLoop () { 

for(var count = 0; count < 15000; count++){ 

document.getElementById('here').innerHTML+='a'; 

} 

} 

</script> 

 

這個函數迴圈修改頁面元素的內容。這段代碼的問題在於，每次迴圈迭代，該元素都被訪問兩次：一次讀取innerHTML 屬性，另外一次重寫它。 

 

一個效率更高的做法是使用局部變數儲存更新後的內容，然後在迴圈結束後一次性寫入： 

代碼如下:

<!-- 最佳化後 --> 

<script type="text/javascript"> 

function innerHTMLLoop () { 

var content = ''; 

for(var count = 0; count < 15000; count++){ 

content+='a'; 

} 

document.getElementById('here').innerHTML+=content; 

} 

</script> 

 

訪問DOM的次數越多，代碼運行速度越慢。因此，在有其他方案可以代替的時候，我們要盡量減少訪問DOM的次數。