Ein Webentwickler zu sein, ist ungefähr wie ein Magier zu sein. Sie erstellen schöne und interaktive Webseiten, und es scheint, dass die Benutzer sie mit Ihren fantastischen Fähigkeiten als perfekt sehen. Aber wie sammelt, entschlüsselt und konvertiert der Browser HTML, CSS und JavaScript in gut aussehende Webinhalte? Hier hilft der Prozess des Renderns einer Seite im Browser.
Kurz gesagt, das Rendern einer Seite umfasst die verschiedenen Schritte, die der Browser durchläuft, um dem Benutzer die angeforderte Seite anzuzeigen. Diese Schritte umfassen das Parsen von HTML, das Erstellen von DOM und CSSOM, das Berechnen und Anwenden von Stilen, das Berechnen und Rendern des Layouts und schließlich das Rendern von Pixeln auf dem Bildschirm.
Der Prozess beginnt mit dem Parsen des HTML-Codes, den der Browser vom Webserver empfängt. Während des Parsing-Prozesses wird das DOM (Document Object Model) erstellt, eine hierarchische Darstellung der Seitenelemente. Dann wird ein CSSOM (CSS Object Model) erstellt, eine Struktur, die die Stilisierung der Elemente definiert. Nach dem Erstellen von DOM und CSSOM berechnet der Browser die Stile für jedes Element, führt JavaScript aus und erstellt ein Layout, das die Positionierung der Elemente auf der Seite bestimmt.
Wenn diese Schritte ausgeführt werden, zeigt der Browser den Inhalt der Seite nacheinander Pixel für Pixel an. Dieser Prozess umfasst Berechnungen und Optimierungen, um ein reibungsloses und effizientes Rendering zu gewährleisten. Wenn alle Schritte abgeschlossen sind, übergibt der Browser die gerenderte Seite schließlich an den Bildschirm und der Benutzer sieht das Ergebnis seiner Abfrage.
HTML- und CSS-Interpretation
Browser spielen eine schwierige Rolle beim Lesen und Interpretieren von HTML- und CSS-Code, um eine Webseite für den Benutzer anzuzeigen. Wenn ein Benutzer eine URL in die Adressleiste des Browsers eingibt, sendet er eine Anfrage an den Server, um ein HTML-Dokument zu erhalten, das Informationen über die Seite enthält.
Nachdem Sie das HTML-Dokument erhalten haben, beginnt der Browser damit, es zu interpretieren. Der Browser teilt den HTML-Code in Blöcke wie Überschriften, Absätze oder Listen mit verschiedenen HTML-Tags auf. Der Browser konvertiert dann die HTML-Elemente in eine interne Datenstruktur namens DOM (Document Object Model).
In der Zwischenzeit bestimmt CSS den Stil und das Aussehen von HTML-Elementen. Der Browser verarbeitet den CSS-Code und erstellt ein CSSOM (CSS Object Model), das zeigt, welche Stile auf verschiedene Elemente auf der Seite angewendet werden sollen.
Sobald der Browser die DOM- und CSSOM-Erstellung abgeschlossen hat, kombiniert er sie zu einem Render Tree (Mapping Tree). Der Render-Baum enthält Informationen darüber, welche Elemente angezeigt werden sollen, und deren relative Position auf der Seite.
Und schließlich beginnt der Browser basierend auf dem Render-Baum mit dem Rendervorgang der Seite, der als Rendering bezeichnet wird. Der Browser beginnt jedes Element von der obersten Ebene des Baums zur unteren Ebene zu zeichnen. Der Browser wendet Stile auf jedes Element an, bestimmt seine Größe und Position und zeichnet schließlich Elemente auf dem Bildschirm.
Dieser gesamte Prozess ist sehr schnell, normalerweise in Sekundenbruchteilen, und der Browser überwacht ständig Änderungen und aktualisiert die Anzeige der Seite bei Bedarf. Durch diesen Prozess sehen wir Webseiten mit so unterschiedlichen Elementen und Stilen.
Parsen eines DOM-Baums und Erstellen eines CSSOM-Baums
Das Parsen von HTML-Code beginnt mit einer lexikalischen Analyse, bei der der Code in Token oder Token aufgeteilt wird. Anschließend erfolgt eine Analyse, bei der die Token in die richtigen Konstrukte der Sprache gruppiert werden. An dieser Stelle wird eine Struktur erstellt, die die hierarchische Struktur des HTML-Codes widerspiegelt.
Der DOM-Baum ist die Grundlage für die Konstruktion des CSSOM-Baums (des Objektbaums des CSS-Modells). Der CSSOM-Baum enthält Informationen zu den Stilen, die auf die Elemente des DOM-Baums angewendet werden. Um einen CSSOM-Baum zu erstellen, verarbeitet der Browser ein Cascading Style Sheet (CSS-Dateien, interne Stile und Stile, die durch das "style" -Attribut der Elemente definiert sind). Als Ergebnis der Erstellung eines CSSOM-Baums wird jedem DOM-Baumelement eine Reihe von Stilen zugewiesen, die beim Rendern auf ihn angewendet werden.
Der DOM-Baum und der CSSOM-Baum werden zu einem Render-Baum kombiniert, der die resultierende Struktur darstellt, die der Browser zum Rendern einer Webseite verwendet. Der Render-Baum enthält nur Elemente und Stile, die die Anzeige der Seite beeinflussen können (z. B. Block- und kleinformatige Elemente, positionierte Elemente, Textelemente usw.).
Das Parsen eines DOM-Baums und das Erstellen eines CSSOM-Baums sind wichtige Schritte beim Rendern einer Webseite durch einen Browser. Ein genaues Verständnis dieser Schritte hilft Entwicklern, den Code zu optimieren und effiziente und produktive Webanwendungen zu erstellen.
Erstellen eines Render-Baums und Berechnen von Stilen
Um einen Render-Baum zu erstellen, durchläuft der Browser den DOM-Baum und überspringt Elemente, die nicht auf der Seite angezeigt werden, z. B. versteckte Elemente oder Elemente, die sich in Kommentaren befinden. Die verbleibenden Elemente werden in Render-Baumknoten konvertiert, die an den nachfolgenden Stilberechnungen und -renderings beteiligt sind.
Nachdem der Render-Baum erstellt wurde, beginnt der Browser mit der Berechnung der Stile. Stile können innerhalb des HTML-Codes mithilfe von Elementattributen innerhalb von Tags definiert werden
