Quando qualcosa viene aggiunto al DOM in memoria, ciò provoca un reflow del browser?

Question

Quando qualcosa viene aggiunto al DOM in memoria, ciò provoca un riflusso del browser? O è solo quando i pixel sullo schermo dicono di cambiare che avviene il reflow? Ad esempio:

Caso 1: elementi Img aggiunte al DOM uno alla volta

var parentDiv = $('#imgHolder'); 
var imgArray = []; // Array of img paths populated in another function 

$.each(imgArray, function() 
{ 
    parentDiv.append(createImgEle(this)); // createImgEle() // returns an <img> with the right src 
} 

Caso 2: elementi Img sono messi in una matrice separata e quindi allegato al DOM

var parentDiv = $('#imgHolder'); 
var imgArray = []; // Array of img paths populated in another function 
var tempArray = []; // Holds the img elements until its fully populated 

$.each(imgArray, function() 
{ 
    tempArray.push(createImgEle(this)); 
} 
parentDiv.append(tempArray); 

caso 3: entrambi i casi 1 o 2 ma in modo predefinito parentDiv è impostato display:none; e reso visibile dopo la ogni ciclo è fatto.

Fondamentalmente, quello che voglio sapere è, il browser solo inizia a ridursi quando viene detto ai pixel dello schermo di cambiare?

Btw, il codice è solo a scopo di esempio e non in produzione, quindi non sbattere me per eventuali errori di logica. Grazie per qualsiasi consiglio

Answer 1

Fondamentalmente, quello che voglio sapere è che il browser inizia a ridursi solo quando i pixel dello schermo vengono cambiati?

No, il browser si riflette quando il DOM cambia. Successivamente, verrà ridisegnato (indicare i pixel sullo schermo per cambiare).

Per i dettagli, dare un'occhiata a this dev.opera.com article e la domanda When does reflow happen in a DOM environment?.

In breve: c'è ovviamente l'ottimizzazione per le successive modifiche DOM, ad esempio se si inserisce una matrice di elementi in un ciclo. Non mi aspetto che i tuoi casi 1 e 2 differiscano in modo evidente.

Solo se si stanno apportando modifiche DOM davvero pesanti, potrebbe essere necessario il caso n. 3. Questo fa sì che i riflessi, nel caso in cui si verifichino durante il ciclo di inserimento, si fermino quando si incontrano gli elementi nascosti, in modo tale che vengano sostanzialmente prevenuti. Tuttavia, i due cambiamenti di visualizzazione prima e dopo il ciclo possono causare lo sfarfallio in alcuni browser.