Wie wird eine Webseite geladen?

Der Benutzer gibt eine URL in die Adressleiste des Browsers ein oder klickt auf einen Link.
URL-Parsing: Der Browser analysiert die URL, um das Protokoll, die Domäne, den Port und den Pfad zu bestimmen.
Suche nach IP-Adresse: Der Browser überprüft den DNS-Cache, dann den Cache des Betriebssystems, dann den Cache des Routers. Wenn die Adresse nicht lokal gefunden wird, wird eine Anfrage an den DNS-Server gesendet, um die IP-Adresse des Domainnamens zu erhalten.
Herstellung der TCP-Verbindung (Handshake): Der Browser stellt eine TCP-Verbindung mit dem Server her, indem er die erhaltene IP-Adresse verwendet (Drei-Wege-Handshake: SYN -> SYN-ACK -> ACK).
Senden der HTTP-Anfrage: Der Browser sendet eine HTTP-Anfrage (meist GET) an den Server mit Angabe der benötigten Ressource (Pfad), Headern (User-Agent, Accept-Encoding, Cookie usw.) und dem Anfragetext (falls vorhanden).
```
GET /index.html HTTP/1.1  
Host: example.com  
User-Agent: Mozilla/5.0 ...  
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8  
```
Verarbeitung der Anfrage durch den Server: Der Server erhält die Anfrage, verarbeitet sie (z.B. führt serverseitige Skripte aus) und erstellt eine HTTP-Antwort.
Senden der HTTP-Antwort: Der Server schickt die HTTP-Antwort zurück an den Browser. Die Antwort enthält den Statuscode (z.B. 200 OK), Header (Content-Type, Content-Length, Cache-Control usw.) und den Antwortkörper (Inhalt der angeforderten Ressource, z.B. HTML-Datei).
```
HTTP/1.1 200 OK  
Content-Type: text/html; charset=UTF-8  
Content-Length: 12345  
Cache-Control: max-age=3600  

<!DOCTYPE html>  
<html>  
<head>...</head>  
<body>...</body>  
</html>  
```
HTML-Parsing und DOM-Erstellung: Der Browser beginnt, den HTML-Code zu empfangen und zu analysieren, und erstellt ein Dokumentenobjektmodell (DOM - Document Object Model) im Speicher. Das DOM stellt einen Baum von HTML-Elementen dar.
Laden und Verarbeitung von Ressourcen: Während des HTML-Parsings findet der Browser Links zu anderen Ressourcen (CSS, JavaScript, Bilder, Schriftarten usw.). Für jede Ressource werden die Schritte 3-7 wiederholt (IP-Suche, TCP-Verbindung (falls nötig), HTTP-Anfrage/-Antwort). Das Laden dieser Ressourcen kann parallel erfolgen (begrenzt durch die Anzahl gleichzeitiger Verbindungen).
Erstellung des CSSOM: Der Browser analysiert CSS-Dateien und <style>-Blöcke im HTML und erstellt ein CSS-Objektmodell (CSSOM - CSS Object Model). Das CSSOM repräsentiert die auf die Elemente der Seite anwendbaren Stile.
Erstellung des Renderbaums: Der Browser kombiniert DOM und CSSOM, um den Renderbaum zu erstellen. Der Renderbaum enthält nur sichtbare Elemente der Seite und deren Stile. Elemente mit display: none werden nicht eingeschlossen.
Layout (Reflow): Der Browser berechnet die genauen Positionen und Größen jedes Elements im Layout basierend auf dem Renderbaum, den Ansichtsfenstergrößen und den Stilen.
Painting (Repaint): Der Browser zeichnet jedes Element auf dem Bildschirm an den berechneten Positionen mit den angewendeten Stilen. Dies geschieht auf Layern.
Komposition: Der Browser kombiniert die gezeichneten Layer zu dem endgültigen Bild, das auf dem Bildschirm des Nutzers angezeigt wird.
Ausführung von JavaScript: Während des Ladens und Parsens der Skripte wird der JavaScript-Code ausgeführt. Die Ausführung von JavaScript kann den DOM und das CSSOM beeinflussen und wiederholte Schritte von Layout und Painting auslösen (Reflow/Repaint).

Schlüsselschritte zur Anzeige des Inhalts:

DOMContentLoaded: Das Ereignis wird ausgelöst, wenn der Browser das HTML-Dokument vollständig geladen und geparst hat und den DOM-Baum erstellt hat, aber auf das Laden von Stylesheets, Bildern und Subframes wartet.
Load: Das Ereignis wird ausgelöst, wenn die gesamte Seite, einschließlich Bilder, Skripte, Styles und anderer Ressourcen, vollständig geladen ist.