本文實(shí)例講述了javascript性能優(yōu)化之DOM交互操作技巧。分享給大家供大家參考，具體如下：
在javascript各個(gè)方面，DOM毫無疑問是最慢的一部分。DOM操作與交互要耗費(fèi)大量時(shí)間，因?yàn)樗鼈兺枰匦落秩菊麄€(gè)頁面或者某一部分。理解如何優(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個(gè)項(xiàng)目。添加每個(gè)項(xiàng)目時(shí)，都有兩次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);更多關(guān)于 文檔碎片，詳見之前文章 《JavaScript文檔碎片操作實(shí)例分析》
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)化之事件委托實(shí)例詳解》
4、注意NodeList
最小化訪問NodeList的次數(shù)可以極大的改進(jìn)腳本的性能，因?yàn)槊看卧L問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的時(shí)候，把imgs[i]放入image變量中，以避免在循環(huán)體內(nèi)多次調(diào)用NodeList;更多關(guān)于 NodeList，詳見之前文章 《在javascript將NodeList作為Array數(shù)組處理的方法》
希望本文所述對大家JavaScript程序設(shè)計(jì)有所幫助。
新聞熱點(diǎn)
疑難解答
