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

2019-11-20 21:03:06

字體：大中小

來源：轉載

供稿：網友

訪問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的次數。

上一篇：JS取request值以及自動執行使用示例

下一篇：createTextRange()的使用示例含文本框選中部分文字內容