Ich habe in letzter Zeit viele Fragen zum Thema Reflow gelesen, aber ich habe dieses Phänomen vor kurzem nicht bemerkt. Schließlich habe ich in der Vergangenheit nicht auf viele Leistungsdetails geachtet. In Bezug auf Reflow sollte einfach gesagt werden, dass es sich um das Rendern von DOM handelt (Berechnung der Größe, des Layouts usw. jedes Objekts im Dokumentbaum durch CSS oder andere Faktoren). Die Erklärung kann einseitig sein, aber definieren Sie zunächst a einfaches Konzept, um das Verständnis zu erleichtern.
Zuerst habe ich die in Mozilla empfohlene Schreibreihenfolge der CSS-Attribute gesehen. Diese Schreibreihenfolge ist nicht nur auf die Spezifikationsstandards des Entwicklungscodes zurückzuführen, sondern auch, weil eine angemessene Schreibreihenfolge eher mit dieser übereinstimmt Renderreihenfolge des Browsers.
Basisstile von mozilla.org
* gepflegt von fantasai
* (Klassen definiert im Markup Guide – http://mozilla.org/contribute/writing/markup)
*/
/* Vorgeschlagene Reihenfolge:
//Eigenschaften anzeigen
*Anzeige
*Listenstil
*Position
* schweben
*klar
//Selbstattribute
*Breite
*Höhe
* Marge
*Polsterung
* Grenze
* Hintergrund
//Textattribute
* Farbe
*Schriftart
* Textdekoration
* Textausrichtung
*vertikal ausrichten
*Leerzeichen
* anderer Text
* Inhalt
Dieser „Visual Reflow“ zeigt den Rendering-Prozess des Browsers wirklich anschaulich. Daraus können Sie erkennen, dass der Browser während des Ladevorgangs nicht das gesamte DOM korrekt platziert, sondern nach ständiger Berechnung die Rendering-Ergebnisse häufig sind geändert, einschließlich der Auswirkungen von js, css usw. auf die Dom-Leistung.