DOM操作性能优化

1. 缓存对DOM元素查找的结果

var pDiv = document.getElementByid("parent");  通过缓存减少DOM元素的查找操作。

2. 减少Repaint和Reflow操作

• 组织好DOM元素，一次性插入到DOM元素树中；
• 将需要操作的DOM隐藏，等操作完之后再显示出来；
• 尽量减少会引起reflow的方法的调用。例如：
  • offsetLeft
  • offsetTop
  • offsetHeight
  • offsetWidth
  • scrollTop/Left/Width/Height
  • clientTop/Left/Width/Height
  • getComputedStyle()
  • currentStyle(in IE))
• 一次性的修改DOM元素的样式；

3. 在页面元素较多时使用XPath来定位DOM元素；

4. HTMLCollection对象并不是数组，它们是一些比较特殊的查询的返回值，在如下情况下，它们会重新执行之前的查询而得到新的返回值（查询结果），虽然多数情况下会和前一次或几次的返回值都一样：

• Length 属性
• 具体的某个成员

所以，HTMLCollection 对象对这些属性和成员的访问，比起数组来要慢很多。　　　　

 var items = document.getElementsByTagName(“div”); 
 var len = items.length;                                  // 
 for(var i = 0; i < len; i++){ 

 }

这样比下面的代码的效率要好得多。　

var items = document.getElementsByTagName(“div”);                         // 
for(var i = 0; i <items.length; i++){ 
}

DOM操作性能优化,布布扣,bubuko.com

DOM操作性能优化

原文：http://www.cnblogs.com/bsqdevspace/p/3648407.html