本文实例讲述了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 += item + i + ;}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程序设计有所帮助。