信鸽网

javascript性能优化之DOM交互操作实例分析

  作者：bea

本文实例讲述了javascript性能优化之DOM交互操作技巧。分享给大家供大家参考，具体如下： 在javascript各个方面，DOM毫无疑问是最慢的一部分。DOM操作与交互要耗费大量时间，因为它们往往需要重新渲染整个页面或者某一部分。理解如何优化与DOM的交互可以极大提高脚本完成的速度。 1、最小化DOM更新 看下面例子： var list = document.getElementById("ul");for (var i=0; i < 10; i++){

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




有用  |  无用

猜你喜欢

您可能感兴趣的文章: