萬盛學電腦網

 萬盛學電腦網 >> 腳本專題 >> javascript >> 減少訪問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的次數。   
copyright © 萬盛學電腦網 all rights reserved