本文實例講述了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程序設計有所幫助。