Wie verarbeitet der Browser die Webseite?

URL-Analyse: Der Browser analysiert die URL, um das Protokoll, den Domainnamen und den Pfad zur Ressource zu bestimmen.
DNS-Anfrage: Wenn der Domainname noch nicht im lokalen Cache ist, sendet der Browser eine DNS-Anfrage, um die IP-Adresse des Servers zu erhalten.
Aufbau der TCP-Verbindung: Der Browser stellt eine TCP-Verbindung mit dem Server unter Verwendung der erhaltenen IP-Adresse her.
HTTP-Anfrage: Der Browser sendet eine HTTP-Anfrage an den Server, um die gewünschte Webseite anzufordern.
Empfang der HTTP-Antwort: Der Server verarbeitet die Anfrage und sendet eine HTTP-Antwort, die den HTML-Code, CSS, JavaScript und andere Ressourcen enthält.
HTML-Parsing: Der Browser beginnt, das empfangene HTML zu parsen und erstellt einen DOM-Baum (Document Object Model).
Ressourcen laden: Während des HTML-Parsings erkennt der Browser Links zu anderen Ressourcen (CSS, JS, Bilder) und beginnt, diese oft parallel zu laden.
CSS-Parsing: Der Browser analysiert das CSS und erstellt einen CSSOM-Baum (CSS Object Model).
Erstellung des Renderbaums: Durch die Kombination von DOM und CSSOM erstellt der Browser einen Renderbaum, der nur sichtbare Knoten und deren Stile enthält.
Layout: Der Browser berechnet die geometrischen Abmessungen und die Position jedes Elements auf der Seite.
Zeichnen: Der Browser zeichnet Pixel für jedes Element auf dem Bildschirm basierend auf dem Renderbaum und den Layout-Ergebnissen.
Compositing: Wenn die Seite Schichten enthält (z.B. aufgrund von CSS-Eigenschaften wie transform oder opacity), kombiniert der Browser diese Schichten, um das endgültige Bild anzuzeigen.
JavaScript-Verarbeitung: Bei Erkennung von <script>-Tags oder Inline-Skripten analysiert, kompiliert und führt der Browser JavaScript aus. JavaScript kann den DOM, CSSOM ändern und die Layout- und Zeichenphasen beeinflussen, was zu wiederholten Schritten führen kann.