Was ist der Unterschied zwischen Reflow und Repaint?

Question

Ich bin ein wenig unklar, auf der Differenz zwischen Reflow + neu aufgebaut (wenn es ein Unterschied überhaupt)

Scheint wie Reflow die Position der verschiedenen DOM-Elemente verschieben könnte, wo Repaint nur ein neues Objekt zu machen. Z.B. Beim Entfernen eines Elements würde ein Reflow auftreten und beim Ändern der Farbe würde ein Repaint auftreten.

Ist das wahr?

Answer 1

Dieser Beitrag Reflow abzudecken scheint vs Leistung repaint

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

Was Definitionen gibt, von dieser Stelle:

A repaint tritt auf, wenn Änderungen zu einem gemacht werden Elemente Haut, die sichtbar ändert, aber nicht seine Layout beeinflussen.

Beispiele hierfür sind outline, visibility, background, oder color. Laut Opera ist Repaint teuer, weil der Browser die Sichtbarkeit aller anderen Knoten im DOM-Baum überprüfen muss.

A Reflow ist noch kritischer, um die Leistung , weil es Änderungen beinhaltet, die das Layout eines Teils der Seite (oder die ganze Seite) beeinflussen .

Beispiele, die Rückflüsse umfassen verursachen: das Hinzufügen oder Entfernen von Inhalten, die explizit oder implizit Ändern width, height, font-family, font-size und vieles mehr.

Erfahren Sie, welche CSS-Eigenschaften Effekt repaint und Bewertung bei http://csstriggers.com

Answer 2

Meiner Meinung nach ist neu streichen betrifft nur die DOM selbst, sondern Reflow wirkt sich auf die gesamte Seite.

Repaint tritt auf, wenn einige Änderungen nur die Skin-Stile wie Farbe und Sichtbarkeit ändern.

Reflow treten auf, wenn die Seite von DOM ihr Layout ändert.

Kürzlich fand ich eine Website kann suchen, welches Attribut Repaint oder Reflow auslöst. http://csstriggers.com/

Answer 3

Hier ist ein weiterer großer Beitrag ist: http://blog.letitialew.com/post/30425074101/repaints-and-reflows-manipulating-the-dom

neu streichen oder neu zu zeichnen, geht durch alle Elemente und bestimmt ihre Sichtbarkeit, Farbe, Kontur und anderen visuellen Stil Eigenschaften, dann aktualisiert er die relevanten Teile des Bildschirms.

Ein Reflow berechnet das Layout der Seite.Ein Reflow für ein Element berechnet die Dimensionen und die Position des Elements neu und löst außerdem weitere Reflows für die untergeordneten Elemente, Vorfahren und Elemente des Elements aus, die im DOM nach ihm angezeigt werden. Dann ruft es ein letztes Repaint auf. Aufschmelzen ist sehr teuer.

Es wird auch eingeführt, wenn ein Reflow auftritt und wie der Reflow minimiert werden kann.