本文實例講述了javascript性能優化之DOM交互操作技巧。分享給大家參考，具體如下：
在javascript各個方面，DOM毫無疑問是最慢的一部分。 DOM操作與互動要耗費大量時間，因為它們往往需要重新渲染整個頁面或某一部分。理解如何最佳化與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更新。总共需要20次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);
更多關於 文件碎片，詳見先前文章 《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性能最佳化之事件委託實例詳解》
4、注意NodeList
最小化訪問NodeList的次數可以極大的改進腳本的效能，因為每次訪問NodeList，都會執行一次基於文件的查詢。
var imgs = document.getElementsByTagName("img");
for (var i=0, len=imgs.length; i < len; i++){
var image = imgs[i];
//more code
}
//这里的关键是长度length存入了len变量，而不是每次都去访问NodeList的length属性。当在循环中使用NodeList的时候，把imgs[i]放入image变量中，以避免在循环体内多次调用NodeList;
更多關於 NodeList，詳見之前文章 《在javascript將NodeList作為Array數組處理的方法》
希望本文所述對大家JavaScript程式設計有所幫助。
