Qual è la differenza tra reflow e repaint?

Question

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

Sembra come riflusso potrebbe essere spostando la posizione dei vari elementi DOM, in cui riverniciare è solo il rendering di un nuovo oggetto. Per esempio. il reflow si verifica quando si rimuove un elemento e il ridisegno si verifica quando si cambia colore.

È vero?

Answer 1

Questo intervento sembra coprire il reflow vs prestazioni riverniciare emette

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 a un elementi skin che cambiano visibilmente , ma non influenzano il suo layout .

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

Un reflow è ancora più critica per le prestazioni perché comporta cambiamenti che influenzano il layout di una porzione della pagina (o l'intera pagina).

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 altro ancora.

Scopri quali CSS-proprietà effetto ridipingere e revisione a http://csstriggers.com

Answer 2

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

Il ridisegno si verifica quando alcune modifiche apportano solo gli stili della pelle, come il colore e la visibilità.

Il rientro si verifica quando la pagina di DOM modifica il layout.

Recentemente ho trovato un sito in grado di cercare quale attributo attiverà il ridisegno o il reflow. http://csstriggers.com/

Answer 3

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

ridipingere 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 pertinenti dello schermo.

Un riflusso calcola il layout della pagina.Un reflow su un elemento ricalcola le dimensioni e la posizione dell'elemento, e inoltre attiva ulteriori riflessi sui figli, gli antenati e gli elementi di quell'elemento che appaiono dopo di esso nel DOM. Quindi chiama un repaint finale. Il reflowing è molto costoso.

Viene inoltre introdotto quando si verifica il riflusso e come ridurre al minimo il reflow.