Häufig gestellte Fragen zum Webinterview: Prinzipien und Unterschiede zwischen Reflow und Repaint

Der Rendering-Mechanismus des Browsers

1. Browser verwenden zwei Engines zur Seitenverarbeitung, und unterschiedliche Browser verwenden unterschiedliche Rendering-Engines

Rendering-Engine:

Chrom und Safari verwenden "WebKit",

Firefor nutzt „Geoko“

JS-Engine

2. Der Browser analysiert HTML in DOM-Baum, CSS analysieren in CSSOM (CSS-Objektmodell);

3. Anschließend werden DOM-Baum und CSSOM kombiniert, um Renderbaum (Renderbaum);

4. Nachdem der Renderbaum abgeschlossen ist, wird der Browser das Layout entsprechend dem Renderbaum erstellen. Nachdem das Layout abgeschlossen ist, wird ein „Boxmodell“ ausgegeben, das die Position und Größe jedes Knotens in der Ansicht genau erfasst und alle Messungen in physikalische Pixelwerte auf dem Bildschirm umwandelt. (Dieser Schritt führt zu回流(reflow) .)

5. Nachdem das Layout abgeschlossen ist, gibt der Browser sofort ein Paint-Stup-Ereignis aus, um den Renderbaum in Bildschirmpixel umzuwandeln. (Dieser Schritt führt zu重繪(repaint) .)

6. Nach den obigen Schritten wird die Seite auf dem Bildschirm angezeigt.

Beachten Sie, dass ein Reflow zwangsläufig zu einem Neuzeichnen führt, ein Neuzeichnen jedoch nicht unbedingt zu einem Reflow.

Reflow und Neulackierung

Umformen

Konzept:

Wenn sich ein Teil oder der gesamte Renderbaum aufgrund von Änderungen in der Struktur, Größe, dem Layout usw. der Elemente ändert, rendert der Browser einen Teil oder den gesamten DOM erneut.

Betonen Sie, dass sich Position und Abstand der Elementknoten geändert haben.

Aktionen, die Reflux verursachen:

• Die Größe des Browserfensters ändert sich
• Inhaltliche Änderungen
• Knoten hinzufügen oder entfernen
• CSS-Pseudoklassen aktivieren
• usw…

Neu zeichnen

Konzept:

Wenn sich der Stil eines Seitenelements ändert, ohne dass seine Position im Dokumentfluss dadurch beeinflusst wird, weist der Browser dem Element einfach den neuen Stil zu und zeichnet es neu.

Betonen Sie den Stil von Elementknoten, beispielsweise die Farbe, die durchgezogene Linie wird zu einer gestrichelten Linie (ohne Änderung von Position und Abstand).

Operationen, die ein Neuzeichnen bewirken:

• Wenn sich der Eigenschaftswert „background-color“ ändert
• Wenn sich der Eigenschaftswert „Rahmenfarbe“ ändert
• Wenn sich der Wert des Sichtbarkeitsattributs ändert
• usw…

Oben finden Sie ausführliche Informationen zu den Prinzipien und Unterschieden von Reflow und Repaint, die in Webinterviews häufig gestellt werden. Weitere Informationen zu Reflow und Repaint in Webinterviews finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!