javascript性能優(yōu)化之DOM交互操作實例分析

更新時間：2015年12月12日 16:19:27 作者：挨踢前端

這篇文章主要介紹了javascript性能優(yōu)化之DOM交互操作技巧,結(jié)合實例形式總結(jié)分析了JavaScript針對DOM操作過程中的各種常見優(yōu)化操作技巧,需要的朋友可以參考下

本文實例講述了javascript性能優(yōu)化之DOM交互操作技巧。分享給大家供大家參考，具體如下：

在javascript各個方面，DOM毫無疑問是最慢的一部分。DOM操作與交互要耗費(fèi)大量時間，因為它們往往需要重新渲染整個頁面或者某一部分。理解如何優(yōu)化與DOM的交互可以極大提高腳本完成的速度。

1、最小化DOM更新

看下面例子：

var list = document.getElementById("ul");
for (var i=0; i < 10; i++){
  var item = document.createELement("li");
  item.appendChild(document.createTextNode("item" + i));
  list.appendChild(item);
}
//這段代碼為列表添加10個項目。添加每個項目時，都有兩次DOM更新?？偣残枰?0次DOM更新。

我們可以使用文檔碎片來最小化DOM更新。

var list = document.getElementById("ul");
var fragment = document.createDocumentFragment();
for (var i=0; i < 10; i++){
  var item = document.createELement("li");
  item.appendChild(document.createTextNode("item" + i));
  fragment.appendChild(item);
}
list.appendChild(fragment);

更多關(guān)于文檔碎片，詳見之前文章《JavaScript文檔碎片操作實例分析》

2、使用innerHTML

對于比較大的DOM更改，使用innerHTML要比createElement()和appendChild()快。

var list = document.getElementById("ul");
var html = "";
for (var i=0; i < 10; i++){
  html += "<li>item" + i + "<li>";
}
list.innerHTML = html;

3、使用事件委托

詳見之前文章《javascript性能優(yōu)化之事件委托實例詳解》

4、注意NodeList

最小化訪問NodeList的次數(shù)可以極大的改進(jìn)腳本的性能，因為每次訪問NodeList，都會運(yùn)行一次基于文檔的查詢。

var imgs = document.getElementsByTagName("img");
for (var i=0, len=imgs.length; i < len; i++){
  var image = imgs[i];
  //more code
}
//這里的關(guān)鍵是長度length存入了len變量，而不是每次都去訪問NodeList的length屬性。當(dāng)在循環(huán)中使用NodeList的時候，把imgs[i]放入image變量中，以避免在循環(huán)體內(nèi)多次調(diào)用NodeList;

更多關(guān)于 NodeList，詳見之前文章《在javascript將NodeList作為Array數(shù)組處理的方法》

希望本文所述對大家JavaScript程序設(shè)計有所幫助。

您可能感興趣的文章: