dlaczego małe uporządkowanie operacji odczytu/zapisu DOM powoduje ogromną różnicę wydajności

Question

poniższy kod ilustruje problem, zmiana kolejności odczytu/zapisu powoduje dużą różnicę czasu wykonania (testowane przy użyciu przeglądarki Chrome, Firefox i 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"; 
    }); 
} 

Oto JSFiddle dla pełnego przykładu http://jsfiddle.net/Dq3KZ/2/.

Moje wyniki dla n = 100:
wersja Powolne: ~ 35ms
Szybka wersja: ~ 2ms

dla n = 1000:
wersja Powolne: ~ 2000ms
Szybko wersja: ~ 25ms

Myślę, że jest to związane z t w każdym przypadku liczba ponownych przeglądarek. W powolnym scenariuszu następuje ponowne nadawanie dla każdej operacji zapisu. Jednak w szybkim scenariuszu proces zmiany pojawia się tylko raz na końcu. Ale nie jestem pewien i nie rozumiem, dlaczego działa to w ten sposób (gdy operacje są niezależne).

Edit: użyłem InnerText własność zamiast clientWidth i Style.Width, mam ten sam problem przy korzystaniu z Google Chrome (http://jsfiddle.net/pindexis/CW2BF/7/). Jednak w przypadku użycia InnerHTML prawie nie ma różnicy (http://jsfiddle.net/pindexis/8E5Yj/).

Edit2: I otworzyły dyskusję o problemie innerHTML/innerText dla zainteresowanych: why does replacing InnerHTML with innerText causes >15X drop in performance

Answer 1

Operacje nie są niezależne.

Konieczne jest ponowne wlewanie, gdy styl lub rozmiary treści uległy zmianie i Pozycje lub wymiary są potrzebne, ponieważ żądasz wymiaru lub dlatego, że ekran musi zostać zaktualizowany (po zakończeniu kodu).

div.clientWidth to ukryte wywołanie funkcji. Gdy zażądasz tej wartości, żądasz w rzeczywistości aktualnej wartości, a zatem, w przypadku zmiany stylu, wywołujesz natychmiastowy przepływ.

W przypadku "szybkiego", nie ma powodu, aby wykonać ponowną wymianę, dopóki ekran nie zostanie przerysowany lub nie zażądasz rozmiaru. W tym przypadku potrzebny jest tylko jeden przepływ.