Qual è la differenza tra il riflusso e riverniciare?

Question

Sono un po 'poco chiara sulla differenza tra reflow + ridipingere (se c'è qualche differenza a tutti)

Sembra reflow potrebbe essere spostando la posizione dei vari elementi DOM, in cui riverniciare è solo il rendering di un nuovo oggetto. Per esempio. reflow si sarebbe verificato durante la rimozione di un elemento e riverniciare si sarebbe verificato quando si cambia il suo colore.

E 'vero?

Answer 1

Questo intervento sembra coprire il reflow vs problemi di prestazioni ridipingere

http : //www.stubbornella.org/content/2009/03/27/reflows-repaints-css-performance-making-your-javascript-slow/

Per quanto riguarda le definizioni, da quel post:

  

Un riverniciare si verifica quando vengono apportate modifiche   per una pelle elementi che cambia   visibilmente, ma non influenzare la sua   disposizione.

     

Esempi di questo sono   outline, visibility, background,   o color. Secondo Opera, riverniciare è   costoso perché il browser deve   verificare la visibilità di tutti gli altri   nodi dell'albero DOM.

     

Un reflow è   ancora più critica per le prestazioni   perché si tratta di cambiamenti che   influenzare il layout di una porzione del   pagina (o l'intera pagina).

     

Gli esempi che causano rimborsi comprendono: l'aggiunta o la rimozione di contenuti, in modo esplicito o implicito che cambia width, height, font-family, font-size e più

.

Approfondisci che ridipingere e la revisione CSS-proprietà vigore al http://csstriggers.com

Answer 2

A mio parere, ridisegnare solo colpisce il DOM in sé, ma reflow colpisce l'intera pagina.

Repaint si verifica quando alcune modifiche che solo i suoi stili della pelle, come il colore e la visibilità.

Ridisponi verificarsi quando la pagina del DOM cambia la sua struttura.

Di recente ho trovato un sito può cercare quale attributo attiverà riverniciare o riflusso. http://csstriggers.com/

Answer 3

Ecco un altro grande post: http: // blog.letitialew.com/post/30425074101/repaints-and-reflows-manipulating-the-dom

  

Un riverniciare, o ridisegnare, passa attraverso tutti gli elementi e determina la loro visibilità, il colore, altre proprietà dello stile visivo contorno e, quindi aggiorna le parti rilevanti dello schermo.

     

Un reflow calcola il layout della pagina. Un reflow su un elemento ricalcola le dimensioni e la posizione dell'elemento, e innesca anche ulteriori scorrimenti sui bambini, gli antenati ed elementi che compaiono dopo nel DOM di quell'elemento. Poi si chiama un ridisegno finale. Reflow è molto costoso.

E 'inoltre introdotto quando si verifica riflusso e come minimizzare riflusso.

Answer 4

riflusso succede quando c'è un cambiamento al layout DOM. Reflow è molto costoso computazionalmente come dimensioni e posizione degli elementi di pagina devono essere calcolati nuovamente, allora lo schermo sarà riverniciato .

Esempio di qualcosa che causerà reflow

for (let i = 1; i <= 100; i++ {
const newEle = document.createElement('p');
newEle.textContent = 'newly created paragraph element';

document.body.appendChild(newEle);
}

Il codice sopra è molto inefficiente, causando 100 processi di reflow per ogni nuovo elemento paragrafo aggiunto.

È possibile attenuare questo processo computazionalmente stressante utilizzando .createDocumentFragment()

const docFrag = document.createDocumentFragment();

 for (let i = 1; i <= 100; i++ {
    const newEle = document.createElement('p');
    newEle.textContent = 'newly created paragraph element';

    docFrag.appendChild(newEle);
    }

document.body.appendChild(docFrag);

Il codice qui sopra ora utilizzare invece solo il processo di riflusso 1x per la creazione di 100 nuovi elementi di paragrafo.

Repaint è semplicemente il cambio di pixel sul monitor, mentre ancora tassazione è il minore dei due mali, poiché scorrimenti comprende il ridisegno nella sua procedura.