javascript提高效能方式之減少dom元素訪問次數

螞蟻小編發表於2017-03-20

訪問dom元素是非常耗費資源的,修改dom元素更是如此,因為修改dom元素會使瀏覽器重新計算頁面的相關變化,所以減少dom元素的訪問和修改次數,能夠有效的提高javascript的效能,下面就是一個簡單的例子,希望能夠給大家帶來一定的起始。

程式碼如下:

[JavaScript] 純文字檢視 複製程式碼
function done(){ 
  for(var count=0;count<1000;count++){ 
    document.getElementById('thediv').innerHTML+='螞蟻部落'; 
  } 
}

以上程式碼訪問1000此dom元素並且修改1000次dom元素,那麼效能將會被極大的影響。

一個提高效能的好的方式就是首先將要修改的結構放入一個區域性變數,最後再修改dom元素。

程式碼如下:

[JavaScript] 純文字檢視 複製程式碼
function done(){ 
  var content=""; 
  for(var count=0;count<1000;count++){ 
    content+="螞蟻部"; 
  } 
  document.getElementById("thediv").innerHTML+=content; 
}


相關文章