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++){
}