currentStyle(in IE))

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

　　清单 19. 特殊测量属性

 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. 样式相关

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 解决方案

.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 解决方案

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 提高性能的方法。

　　XPath

　　一个页面上往往包含 1000 多页面元素，在定位具体元素的时候，往往需要一定的时间。如果用 id 或 name 定位可能效率不会太慢，如果用元素的一些其他属性(比如 className 等等)定位，可能效率有不理想了。有的可能只能通过遍历所有元素(getElementsByTagName)然后过滤才能找到相应元素，这就更加低效了，这里我们推荐使用 XPath 查找元素，这是很多浏览器本身支持的功能。

　　清单 23. XPath 解决方案

 if(document.evaluate){  
 var tblHeaders = document.evaluate(“//body/div/table//th”); 
 var result = tblHeaders.iterateNext();  
 while(result) {  
 result.style.border = “1px dotted blue”;  
 result ……………… 
 result = xpathResult.iterateNext();  
 }  
 } else{ //getElementsByTagName() …… 
 // 处理浏览器不支持 XPath 的情况 
……………………………… 
 }