javascript - DOM の読み取り/書き込み操作を少し並べ替えると、パフォーマンスに大きな違いが生じる理由

Question

次のコードは問題を示しています。読み取り/書き込みの順序を変更すると、実行時間に大きな違いが生じます (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";
    });
}

完全な例の JSFiddle を次に示しますhttp://jsfiddle.net/Dq3KZ/2/。

n=100 に対する私の結果:
遅いバージョン: ~35ms
速いバージョン: ~2ms

n=1000 の場合:
遅いバージョン: ~2000ms
速いバージョン: ~25ms

これは、それぞれのブラウザのリフロー回数に関係していると思います。遅いシナリオでは、書き込み操作ごとにリフローが発生します。ただし、高速シナリオでは、リフローは最後に 1 回だけ発生します。しかし、よくわかりませんし、なぜそのように機能するのかわかりません（操作が独立している場合）。

編集:プロパティをandInnerTextの代わりに使用しました。Google Chrome ( http://jsfiddle.net/pindexis/CW2BF/7/ ) を使用すると、同じ動作が得られました。ただし、を使用すると、ほとんど違いはありません ( http://jsfiddle.net/pindexis/8E5Yj/ )。clientWidthStyle.WidthInnerHTML

Edit2:興味のある方のために、innerHTML/innerText の問題についてのディスカッションを開始しました: InnerHTML を innerText に置き換えると、パフォーマンスが 15 倍以上低下するのはなぜですか