Frontend Academy · Lektion

Browser, DNS und HTTP: Der Lebenszyklus einer Anfrage

Verfolgen Sie eine URL von der Adressleiste über die DNS-Auflösung, die TCP-Verbindung und die HTTP-Anfrage bis zur Serverantwort im Browser.

Lektion 1 von 413 Schritte

Browser, DNS und HTTP: Der Lebenszyklus einer Anfrage ist eine kostenlose Frontend Academy-Lektion auf CoddyKit. Dies ist Lektion 1 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Frontend Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.

Was passiert, wenn Sie eine URL eingeben?

Jedes Mal, wenn Sie eine Website aufrufen, startet Ihr Browser eine genau festgelegte Abfolge von Schritten. Wenn Sie diese Abfolge verstehen, werden Sie zu besseren Entwicklern: Sie wissen, wo etwas schiefgehen kann und wie Sie die Abläufe beschleunigen.

Schritt 1 – DNS-Auflösung

DNS (Domain Name System) ist das Telefonbuch des Internets. Ihr Browser fragt einen DNS-Resolver: "Welche IP-Adresse steckt hinter example.com?". Der Resolver prüft Caches und fragt bei Bedarf autoritative Nameserver ab.

# DNS lookup chain
# Browser cache → OS cache → Router cache → ISP resolver → Root NS → TLD NS → Authoritative NS

Schritt 2 – TCP-Handshake

Sobald die IP-Adresse bekannt ist, öffnet der Browser eine TCP-Verbindung über den Drei-Wege-Handshake: SYN → SYN-ACK → ACK. Bei HTTPS folgt darauf ein TLS-Handshake, der die Verschlüsselung aushandelt.

Schritt 3 – Die HTTP-Anfrage

Der Browser sendet eine HTTP-Anfrage über die TCP-Verbindung. Sie enthält eine Methode (GET, POST …), den Pfad (/index.html), die HTTP-Version und Header wie Host und Accept.

GET /index.html HTTP/1.1
Host: example.com
Accept: text/html
User-Agent: Mozilla/5.0

Schritt 4 – Die HTTP-Antwort

Der Server verarbeitet die Anfrage und sendet eine Antwort zurück: einen Statuscode (200 OK, 404 Not Found …), Antwort-Header (Content-Type, Cache-Control) und den Body (HTML, JSON, Bilddaten).

HTTP/1.1 200 OK
Content-Type: text/html; charset=UTF-8
Content-Length: 1234

<!DOCTYPE html>...

HTTP/1.1 vs. HTTP/2 vs. HTTP/3

HTTP/1.1 sendet eine Anfrage pro Verbindung. HTTP/2 multiplexed viele Anfragen über eine Verbindung. HTTP/3 verwendet QUIC (UDP-basiert) für eine geringere Latenz, insbesondere in verlustbehafteten mobilen Netzwerken.

Diese Statuscodes müssen Sie kennen

2xx = Erfolg (200 OK, 201 Created). 3xx = Weiterleitung (301 Moved Permanently, 304 Not Modified). 4xx = Clientfehler (400, 401, 403, 404). 5xx = Serverfehler (500, 502, 503).

HTTPS und TLS

HTTPS kapselt HTTP in TLS (Transport Layer Security). TLS bietet Verschlüsselung, damit der Datenverkehr nicht gelesen werden kann, Authentifizierung über Zertifikate, damit Sie tatsächlich mit example.com kommunizieren, und Integrität, damit Daten nicht manipuliert werden.

Caching: Wiederholte Aufrufe beschleunigen

Antworten können Cache-Control: max-age=86400 enthalten, damit der Browser die zwischengespeicherte Kopie einen Tag lang wiederverwendet. Mit den Headern ETag und Last-Modified kann der Browser prüfen, ob die zwischengespeicherte Version noch aktuell ist.

Cache-Control: max-age=86400, immutable
ETag: "abc123"
Last-Modified: Wed, 01 Jan 2025 00:00:00 GMT

Cookies und Sitzungen

Server setzen Cookies über den Header Set-Cookie. Der Browser sendet sie bei jeder Anfrage an dieselbe Domain automatisch zurück. Sitzungen bestehen normalerweise aus einem Cookie mit einer Sitzungs-ID, die der Server den Benutzerdaten zuordnet.

CDN – Content Delivery Networks

Ein CDN speichert Kopien Ihrer Ressourcen weltweit in Rechenzentren. Benutzer laden die Daten vom nächstgelegenen Knoten herunter, wodurch sich die Latenz verringert. Cloudflare, Fastly und AWS CloudFront sind beliebte CDNs, die von den meisten großen Websites verwendet werden.

Kurztest

Welche HTTP-Methode wird verwendet, um eine Webseite von einem Server anzufordern?

Beantworte es in der interaktiven Lektion

Zusammenfassung: Der vollständige Lebenszyklus einer Anfrage

URL eingegeben → DNS löst die Domain in eine IP-Adresse auf → TCP- (+ TLS-)Verbindung hergestellt → Browser sendet HTTP-Anfrage → Server antwortet mit Status, Headern und Body → Browser rendert die Antwort. Jeder Schritt ist im Network-Panel der DevTools sichtbar.

Kostenlos starten

Lerne HTML mit einem KI-Tutor — kostenlos

Schreibe und führe echten Code in deinem Browser aus, bekomme sofortige Hilfe von einem 24/7 KI-Tutor und setze dein Lernen im Web oder in der App fort.

Kurse: 41
Lektionen: 163

Kostenlos lernen Den vollständigen Kurs ansehen

Häufig gestellte Fragen

Ist die Lektion „Browser, DNS und HTTP: Der Lebenszyklus einer Anfrage“ kostenlos?

Ja — der vollständige Text von „Browser, DNS und HTTP: Der Lebenszyklus einer Anfrage“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Frontend Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Browser, DNS und HTTP: Der Lebenszyklus einer Anfrage“?

Verfolgen Sie eine URL von der Adressleiste über die DNS-Auflösung, die TCP-Verbindung und die HTTP-Anfrage bis zur Serverantwort im Browser. Du übst Frontend Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um Frontend Academy zu starten?

Keine Vorkenntnisse erforderlich. Frontend Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 1 von 4.

Wie lange dauert die Lektion „Browser, DNS und HTTP: Der Lebenszyklus einer Anfrage“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser Frontend Academy-Lektion Code schreiben und ausführen?

Ja. Jede Frontend Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

Browser, DNS und HTTP: Der Lebenszyklus einer Anfrage
HTML, CSS und JavaScript: Die Aufgabe jeder Ebene
Wie eine Seite gerendert wird: Parsing, DOM, CSSOM, Layout, Paint
Entwicklertools: DevTools öffnen und verwenden

← Zurück zu Frontend Academy