Webdesignerin

Webdesignerin

Dipl. Wi. Infrom. Susanne Wollatz

Rendern einer Website

Das Rendern einer Website ist der Prozess, bei dem der Webbrowser den HTML-, CSS- und JavaScript-Code (Programmier-Codes zum Erstellen einer Website) in eine visuell darstellbare Seite umwandelt. Es ist ein vielschichtiger Prozess, der aus mehreren Schritten besteht. Hier ist eine detaillierte Beschreibung der einzelnen Schritte:

  1. DNS (Domain Name System)-Auflösung:

    DNS-Anfrage: Der Browser fragt den DNS-Server nach der IP-Adresse der Website anhand des Domainnamens (z.B. www.elbbyte.de).
    DNS-Antwort: Der DNS-Server antwortet mit der IP-Adresse des Webservers, auf dem die Website gehostet ist.

  2. TCP (Transmission Control Protocol)-Verbindung:
    Eine Netzwerkverbindung, die den Austausch von Datenpaketen zwischen zwei Computern ermöglicht.

    TCP-Socket-Verbindung: Der Browser stellt eine Verbindung zum Webserver her, meist über Port 80 (HTTP) oder 443 (HTTPS).
    SSL/TLS (bei HTTPS): Es findet eine Verschlüsselung der Verbindung statt.

  3. HTTP (Hypertext Transfer Protocol)-Anfrage:

    Anfrage senden: Der Browser sendet eine HTTP-Anfrage an den Webserver, um die HTML-Dokumente anzufordern.
    Server-Antwort: Der Webserver verarbeitet die Anfrage und sendet die entsprechende HTML-Datei zurück an den Browser.

  4. HTML-Verarbeitung:

    Empfangen und Parsen (Umwandlung in ein maschinenlesbares Format): Der Browser empfängt das HTML-Dokument und beginnt, es zu parsen (analysieren und in eine Baumstruktur umwandeln, den sogenannten DOM-Baum)
    Erstellen des DOM-Baums: Der HTML-Inhalt wird in einen Dokumenten-Objekt-Modell (DOM)-Baum umgewandelt, der die Struktur und den Inhalt der Website darstellt.

  5. Ressourcenanfragen:

    Ermitteln zusätzlicher Ressourcen: Während der Browser das HTML-Dokument parst, identifiziert er zusätzliche Ressourcen wie CSS-Dateien, JavaScript-Dateien, Bilder, Schriftarten usw
    Asynchrone Anfragen: Der Browser sendet asynchrone HTTP-Anfragen, um diese Ressourcen herunterzuladen.

  6. CSS-Verarbeitung:

    CSS-Parsing: Der Browser empfängt und parst die CSS-Dateien, erstellt daraus einen CSSOM (CSS-Objektmodell)-Baum
    Kombinieren von DOM und CSSOM: Der Browser kombiniert den DOM- und den CSSOM-Baum, um den Renderbaum zu erstellen.

  7. Renderbaum-Erstellung:

    Erstellen des Renderbaums: Der Renderbaum repräsentiert die sichtbaren Elemente der Webseite und ihre Stile.

  8. Layout-Berechnung:

    Layout: Der Browser berechnet die genaue Position und Größe jedes Elements im Renderbaum und erstellt das Layout der Seite.

  9. Rendering und Malen:

    Rendering: Der Browser teilt den Renderbaum in verschiedene Layer (Schichten) auf und berechnet, wie jedes Layer gezeichnet werden soll
    Malen: Die Layer werden auf den Bildschirm gerendert (gemalt), wobei die Grafikkarte des Computers verwendet wird, um die Elemente anzuzeigen.

  10. JavaScript-Ausführung:

    JavaScript-Parsing: Der Browser parst und führt eingebettete oder verlinkte JavaScript-Dateien aus.
    DOM-Manipulation: JavaScript kann den DOM-Baum verändern, was eventuell weitere Layout- und Rendering-Prozesse auslöst.

  11. Interaktive Inhalte:

    Ereignisbindung: Der Browser bindet Ereignisse (wie Klicks, Eingaben) an die entsprechenden DOM-Elemente, sodass Benutzerinteraktionen verarbeitet werden können.
    Ereignisverarbeitung: Bei Benutzerinteraktionen wird JavaScript ausgeführt, um die Inhalte der Seite dynamisch zu ändern.

Dieser gesamte Prozess passiert in Sekundenbruchteilen, sodass Benutzer eine nahtlose und interaktive Erfahrung haben. Moderne Browser sind sehr effizient in der Handhabung dieser Schritte und nutzen verschiedene Optimierungen, um die Ladezeit und die Reaktionsfähigkeit der Webseite zu verbessern.