var pDiv = document.getElementById(“parent”);
pDiv.style.display = “none”----- reflow
pDiv.appendChild(cDiv1);
pDiv.appendChild(cDiv2);
pDiv.appendChild(cDiv3);
pDiv.appendChild(cDiv4);
pDiv.appendChild(cDiv5);
pDiv.style.width = “100px”;
pDiv.style.height = “100px”;
pDiv.style.display = “block”----- reflow
先隐藏 pDiv，再显示，这样，隐藏和显示之间的操作便不会产生任何的 Reflow，提高了效率
特殊测量属性和方法
DOM 元素里面有一些特殊的测量属性的访问和方法的调用，也会触发 Reflow，比较典型的就是“offsetWidth”属性和“getComputedStyle”方法。
图 1. 特殊测量属性和方法
这些测量属性和方法大致有这些：
复制代码 代码如下:
offsetLeft
offsetTop
offsetHeight
offsetWidth
scrollTop/Left/Width/Height
clientTop/Left/Width/Height
getComputedStyle()
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 的情况
………………………………
}
浏览器 XPath 的搜索引擎会优化搜索效率，大大缩短结果返回时间。
HTMLCollection 对象
这是一类特殊的对象，它们有点像数组，但不完全是数组。下述方法的返回值一般都是 HTMLCollection 对象：
document.images, document.forms
getElementsByTagName()
getElementsByClassName()
这些 HTMLCollection 对象并不是一个固定的值，而是一个动态的结果。它们是一些比较特殊的查询的返回值，在如下情况下，它们会重新执行之前的查询而得到新的返回值（查询结果），虽然多数情况下会和前一次或几次的返回值都一样：
Length 属性
具体的某个成员
所以，HTMLCollection 对象对这些属性和成员的访问，比起数组来要慢很多。当然也有例外，Opera 和 Safari 对这种情况就处理的很好，不会有太大性能问题。
参考如下代码：
清单 24. HTMLConnection 对象
复制代码 代码如下: