为什么 DOM 读/写操作的微小重新排序会导致巨大的性能差异

下面的代码说明了这个问题，改变读/写的顺序会导致执行时间有很大的差异（使用Chrome、Firefox和IE进行测试）：

// read->write->read->write...
function clearSlow(divs){
    Array.prototype.forEach.call(divs, function(div) {
        contents.push(div.clientWidth);
        div.style.width = "10px";
    });
}
// read->read->...->write->write...
function clearFast(divs){
    Array.prototype.forEach.call(divs, function(div) {
        contents.push(div.clientWidth);
    });
    Array.prototype.forEach.call(divs, function(div) {
        div.style.width = "10px";
    });
}

这是完整示例的 JSFiddlehttp://jsfiddle.net/Dq3KZ/2/ http://jsfiddle.net/Dq3KZ/2/ .

我的 n=100 结果：
慢速版本：~35ms
快速版本：~2ms

对于 n=1000：
慢速版本：~2000ms
快速版本：~25ms

我认为这与每种情况下浏览器回流的次数有关。在慢速场景中，每个写操作都会发生回流。然而，在快速场景下，回流仅在最后发生一次。但我不确定也不明白为什么它会这样工作（当操作是独立的时）。

Edit: I used InnerText财产而不是clientWidth and Style.Width，我在使用 Google Chrome 时遇到了相同的行为（http://jsfiddle.net/pindexis/CW2BF/7/ http://jsfiddle.net/pindexis/CW2BF/7/）。然而，当InnerHTML使用时，几乎没有区别（http://jsfiddle.net/pindexis/8E5Yj/ http://jsfiddle.net/pindexis/8E5Yj/).

Edit2:我已经为那些感兴趣的人开启了关于innerHTML/innerText问题的讨论：为什么用innerText替换InnerHTML会导致性能下降>15倍 https://stackoverflow.com/q/19256864/1117720

这些操作不是独立的。

当样式或内容大小发生变化时必须发生重排and需要位置或尺寸，要么是因为您请求尺寸，要么是因为必须更新屏幕（当您的代码完成时）。

div.clientWidth是一个隐藏函数调用。当您请求此值时，您实际上请求的是最新值，因此，随着样式的更改，您会立即触发回流。

在“快速”情况下，在重新绘制屏幕或请求尺寸之前没有理由进行回流。在这种情况下，实际上只需要一次回流焊。