Was ist der Unterschied zwischen Reflow und Repaint?

Ich bin mir ein wenig unklar über den Unterschied zwischen Reflow + Repaint (wenn es überhaupt einen Unterschied gibt)

Es scheint, als würde der Reflow die Position verschiedener DOM-Elemente verschieben, bei denen beim Neulackieren nur ein neues Objekt gerendert wird. Zum Beispiel würde ein Reflow auftreten, wenn ein Element entfernt wird, und ein Neulackieren würde auftreten, wenn seine Farbe geändert wird.

Ist das wahr?

Dieser Beitrag scheint die Leistungsprobleme von Reflow und Repaint abzudecken

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

Wie für Definitionen aus diesem Beitrag:

Ein Repaint tritt auf, wenn Änderungen an einem Element-Skin vorgenommen werden, die sich sichtbar ändern, sich jedoch nicht auf das Layout auswirken.

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

Ein Reflow ist für die Leistung noch wichtiger, da er Änderungen beinhaltet, die sich auf das Layout eines Teils der Seite (oder der gesamten Seite) auswirken.

Beispiele , die Ursache Rückfluesse umfassen: Hinzufügen oder Entfernen von Inhalten, die explizit oder implizit zu ändern width, height, font-family, font-sizeund vieles mehr.

Unter http://csstriggers.com erfahren Sie, welche CSS-Eigenschaften das Repaint bewirken und überprüfen

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

Ein Repaint oder Redraw durchläuft alle Elemente und bestimmt deren Sichtbarkeit, Farbe, Umriss und andere visuelle Stileigenschaften. Anschließend werden die relevanten Teile des Bildschirms aktualisiert.

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 auch weitere Reflows für die untergeordneten Elemente, Vorfahren und Elemente des Elements aus, die im DOM danach angezeigt werden. Dann wird ein endgültiges Repaint aufgerufen. Reflowing ist sehr teuer.

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

Meiner Meinung nach wirkt sich Repaint nur auf das DOM selbst aus, Reflow jedoch auf die gesamte Seite.

Repaint tritt auf, wenn einige Änderungen nur die Hautstile wie Farbe und Sichtbarkeit betreffen.

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

Kürzlich habe ich festgestellt, dass eine Site suchen kann, welches Attribut Repaint oder Reflow auslöst. http://csstriggers.com/

Reflow tritt auf , wenn das DOM-Layout geändert wird. Reflow ist rechenintensiv, da Abmessungen und Positionen von Seitenelementen erneut berechnet werden müssen. Anschließend wird der Bildschirm neu gestrichen .

Beispiel für etwas, das einen Reflow verursacht

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

document.body.appendChild(newEle);
}

Der obige Code ist sehr ineffizient und verursacht 100 Reflow-Prozesse für jedes neue angehängte Absatzelement.

Sie können diesen rechenintensiven Prozess mithilfe von abmildern .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);

Der obige Code verwendet jetzt stattdessen nur den Reflow-Prozess 1x für die Erstellung von 100 neuen Absatzelementen.

Repaint ist lediglich das Ändern von Pixeln auf dem Monitor, während es immer noch das geringere von zwei Übeln ist, da ein Reflow ein Repaint in seine Prozedur einbezieht.

Tolle Erklärung, die ich hier gefunden habe .

• Reflow: Berechnen Sie das Layout jedes sichtbaren Elements (Position und Größe).
• Repaint: rendert die Pixel auf dem Bildschirm.