提高 web 应用性能之 JavaScript 性能调优 （5）

look_w

特殊测量属性和方法DOM 元素里面有一些特殊的测量属性的访问和方法的调用，也会触发 Reflow，比较典型的就是“offsetWidth”属性和“getComputedStyle”方法。
图 1. 特殊测量属性和方法这些测量属性和方法大致有这些：

• offsetLeft
• offsetTop
• offsetHeight
• offsetWidth
• scrollTop/Left/Width/Height
• clientTop/Left/Width/Height
• getComputedStyle()
• currentStyle(in IE))

这些属性和方法的访问和调用，都会触发 Reflow 的产生，我们应该尽量减少对这些属性和方法的访问和调用，参考如下代码：
清单 19. 特殊测量属性

1 2 3 4 5 6 7

var pe = document.getElementById(“pos_element”); var result = document.getElementById(“result_element”); var pOffsetWidth = pe.offsetWidth; result.children[0].style.width  = pOffsetWidth; result.children[1].style.width  = pOffsetWidth; result.children[2].style.width  = pOffsetWidth; …………其他修改…………

这里我们可以用临时变量将“offsetWidth”的值缓存起来，这样就不用每次访问“offsetWidth”属性。这种方式在循环里面非常适用，可以极大地提高性能。
样式相关我们肯定经常见到如下的代码：
清单 20. 样式相关

1 2 3 4 5

var sElement = document.getElementById(“pos_element”); sElement.style.border = ‘ 1px solid red ’ sElement.style.backgroundColor = ‘ silver ’ sElement.style.padding = ‘ 2px 3px ’ sElement.style.marginLeft = ‘ 5px ’

但是可以看到，这里的每一个样式的改变，都会产生 Reflow。需要减少这种情况的发生，我们可以这样做：
解决方案 1：
清单 21. className 解决方案

1 2 3 4 5 6 7

.class1 { border: ‘ 1px solid red ’ background-color: ‘ silver ’ padding: ‘ 2px 3px ’ margin-left: ‘ 5px ’ } document.getElementById(“pos_element”).className = ‘class1’ ;

用 class 替代 style，可以将原有的所有 Reflow 或 Repaint 的次数都缩减到一个。
解决方案 2：
清单 22. cssText 解决方案

1 2 3 4

var sElement = document.getElementById(“pos_element”); var newStyle = ‘ border: 1px solid red; ’ + ‘ background-color: silver; ’ +                                 ‘ padding: 2px 3px; ’ + “margin-left: 5px;” sElement.style.cssText += newStyle;

一次性设置所有样式，也是减少 Reflow 提高性能的方法。