Detaillierte Erläuterung des Browser-Rendering-Prozesses

Struktur der Hauptkomponente des Browsers

(Hauptkomponente des Browsers)

Rendering-Engine – Webkit und Gecko

Firefox verwendet Geoko, eine von Mozilla unabhängig entwickelte Rendering-Engine.

Sowohl Safari als auch Chrome verwenden Webkit. Webkit ist eine Open-Source-Rendering-Engine, die ursprünglich für die Linux-Plattform entwickelt und später von Apple auf Mac und Windows portiert wurde.

In diesem Artikel verwende ich zur Erläuterung hauptsächlich die Webkit-Rendering-Engine. Obwohl die von Webkit und Gecko verwendeten Begriffe leicht unterschiedlich sind, sind ihre Hauptprozesse im Wesentlichen dieselben.

(Webkit-Rendering-Engine-Prozess)

Kritischer Rendering-Pfad

Der kritische Rendering-Pfad bezieht sich auf den HTML-Code, den der Browser vom erhält Erstanfrage, CSS, Javascript und andere Ressourcen, und dann analysieren, den Baum erstellen, das Layout rendern, zeichnen und schließlich den gesamten Prozess auf der Schnittstelle präsentieren, die Kunden sehen können.

Der Rendering-Prozess des Browsers umfasst also hauptsächlich die folgenden Schritte:

HTML analysieren, um einen DOM-Baum zu generieren.

CSS analysieren, um einen CSSOM-Regelbaum zu generieren.

Fügen Sie den DOM-Baum und den CSSOM-Regelbaum zusammen, um einen Rendering-Baum zu generieren.

Durchlaufen Sie den Rendering-Baum, um das Layout zu starten und die Positions- und Größeninformationen jedes Knotens zu berechnen.

Zeichnen Sie jeden Knoten des Rendering-Baums auf den Bildschirm.

DOM-Baum erstellen

Wenn der Browser das HTML-Dokument von der Serverantwort empfängt, durchläuft er die Dokumentknoten und generiert einen DOM-Baum.

Es ist zu beachten, dass der DOM-Baum-Generierungsprozess durch die Ladeausführung von CSS und JS blockiert werden kann. Das Problem der Rendering-Blockierung wird weiter unten erörtert.

CSSOM-Regelbaum erstellen

Der Browser analysiert CSS-Dateien und generiert CSS-Regelbäume. Jede CSS-Datei wird in ein StyleSheet-Objekt analysiert und jedes Objekt enthält CSS-Regeln. CSS-Regelobjekte enthalten Selektor- und Deklarationsobjekte, die der CSS-Syntax und anderen Objekten entsprechen.

Rendering-Blockierung

Wenn der Browser auf ein Skript-Tag stößt, wird der DOM-Aufbau angehalten, bis das Skript die Ausführung abgeschlossen hat, und dann mit dem Aufbau des DOM fortfahren. Jedes Mal, wenn Sie ein JavaScript-Skript ausführen, wird der Aufbau des DOM-Baums ernsthaft blockiert. Wenn das JavaScript-Skript auch das CSSOM betreibt und das CSSOM nicht heruntergeladen und erstellt wurde, verzögert der Browser sogar die Ausführung des Skripts und den Build das DOM, bis der Download seines CSSOM abgeschlossen ist.

Daher ist die Position des Skript-Tags sehr wichtig. Bei der tatsächlichen Verwendung können Sie die folgenden zwei Prinzipien befolgen:

CSS-Priorität: In der Reihenfolge der Einführung stehen CSS-Ressourcen vor JavaScript-Ressourcen.
JS nachher: ​​Normalerweise platzieren wir JS-Code am Ende der Seite, und JavaScript sollte die Konstruktion des DOM so wenig wie möglich beeinflussen.

Beim Parsen von HTML werden die neuen Elemente in den Dom-Baum eingefügt und gleichzeitig das CSS durchsucht, und dann werden die entsprechenden Stilregeln auf die Elemente angewendet in der Reihenfolge von rechts nach links gesucht.

Zum Beispiel: div p {font-size: 16px}, es wird zunächst nach allen p-Tags gesucht und ermittelt, ob sein übergeordnetes Tag ein div ist, bevor entschieden wird, ob dieser Stil zum Rendern verwendet werden soll.
Wenn wir normalerweise CSS schreiben, versuchen wir daher, ID und Klasse so oft wie möglich zu verwenden und sie niemals zu überladen.

Aufbau eines Rendering-Baums

Wir können einen Rendering-Baum über den DOM-Baum und den CSS-Regelbaum erstellen. Der Browser durchläuft zunächst jeden sichtbaren Knoten, beginnend beim Wurzelknoten des DOM-Baums. Suchen Sie für jeden sichtbaren Knoten die entsprechende CSS-Stilregel und wenden Sie sie an.

Nachdem der Rendering-Baum erstellt wurde, ist jeder Knoten ein sichtbarer Knoten und enthält seinen Inhalt und den Stil der entsprechenden Regel. Dies ist auch der größte Unterschied zwischen dem Rendering-Baum und dem DOM-Baum. Der Rendering-Baum wird zur Anzeige verwendet. Natürlich werden diese unsichtbaren Elemente beispielsweise nicht in diesem Baum angezeigt. Darüber hinaus werden Elemente mit Anzeige gleich „Keine“ nicht in diesem Baum angezeigt, aber Elemente mit Sichtbarkeit gleich „Ausgeblendet“ werden in diesem Baum angezeigt.

Baumlayout rendern

Die Layoutphase durchläuft den Wurzelknoten des Rendering-Baums und bestimmt dann die genaue Größe und Position jedes Knotenobjekts auf der Seite. Die Ausgabe der Layoutphase ist ein Boxmodell. Dadurch wird die genaue Position und Größe jedes Elements auf dem Bildschirm genau erfasst.

Rendering-Baumzeichnung

In der Zeichenphase wird der Rendering-Baum durchlaufen und die paint()-Methode des Renderers aufgerufen, um seinen Inhalt auf dem Bildschirm anzuzeigen. Die Rendering-Arbeit des Rendering-Baums wird von der UI-Backend-Komponente des Browsers abgeschlossen.

Umfließen und neu zeichnen:

Berechnen Sie entsprechend dem Rendering-Baum-Layout den CSS-Stil, d. h. die geometrischen Informationen wie die Größe und Position jedes Knotens auf der Seite. HTML hat standardmäßig ein flüssiges Layout. CSS und js unterbrechen dieses Layout und ändern das Erscheinungsbild, den Stil, die Größe und die Position des DOM. Zwei wichtige Konzepte sollten an dieser Stelle erwähnt werden: Replaint und Reflow.

replaint: Das Neuzeichnen eines Teils des Bildschirms hat keinen Einfluss auf das Gesamtlayout. Beispielsweise ändert sich die Hintergrundfarbe eines bestimmten CSS, aber die geometrische Größe und Position des Elements bleiben unverändert.
Reflow: Dies bedeutet, dass sich die geometrische Größe der Komponente geändert hat und wir den Rendering-Baum erneut überprüfen und berechnen müssen. Entweder ein Teil oder der gesamte Renderbaum hat sich geändert. Dies ist Reflow oder Layout.

Wir sollten also versuchen, Reflow und Replain so weit wie möglich zu reduzieren. Ich denke, dies ist einer der Gründe, warum Tabellenlayout heutzutage selten verwendet wird.

display:none löst einen Reflow aus. Seine Semantik besteht darin, das Element auszublenden, aber das Element belegt weiterhin den Layoutbereich. Daher wird „visibility :hidden“ nur ein Repaint auslösen, da keine Positionsänderung stattgefunden hat.

In einigen Fällen, z. B. beim Ändern des Stils eines Elements, führt der Browser nicht sofort einen Reflow oder Neuaufbau durch, sondern führt einen Stapel solcher Vorgänge durch. Dies wird auch als asynchroner Reflow bezeichnet oder Neulackierung.
In einigen Fällen, z. B. beim Ändern der Fenstergröße, beim Ändern der Standardschriftart der Seite usw. Bei diesen Vorgängen wird der Browser sofort neu gestartet.

Zusammenfassung

In diesem Artikel haben wir Schritt für Schritt etwas über den Browser-Rendering-Prozess gelernt. Wenn Sie Fragen zum Browser-Rendering-Prozess haben, geben Sie diese bitte an uns Feedback Wir kommunizieren gemeinsam, lernen gemeinsam und machen gemeinsam Fortschritte.

Verwandte Lektüre:

HTML-Sprung zu anderen Seiten in zwei Sekunden

So erstellen Sie ein temporäres QQ-Popup auf einer Webseite Dialogfeld

Was sind die Operationen von randlosen und randlosen Iframes

Wie verwende ich die Basis? Tag

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung des Browser-Rendering-Prozesses. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!