Drücke F12 und wechsle in den Netzwerk-Tab. Hier siehst du eine Übersicht über alle Anfragen, die die Website gesendet hat, sowie die Antworten des Servers. Anfragen sind z.B. für
- Inhalt
- Bilder/Videos/Audio
- Schriftarten
- Stylesheets
- Scripte (JavaScript)
Bei dynamischen Websites können deutlich mehr Anfragen anfallen, da die Website ständig mit dem Server kommuniziert, z.B. um weitere Inhalte nachzuladen oder Befehle auszuführen.
Eine Website besteht aus zwei Teilen, dem Client (was im Browser dargestellt wird) und dem Server (der auf Anfragen reagiert, Informationen bereitstellt und Befehle bearbeitet).
Wenn du eine Website öffnest, wird erst einmal eine Verbindung zum Server hergestellt. Dann wird eine Anfrage an den Server gesendet, eine bestimmte URL zu öffnen (z.B. https://www.gutefrage.net/frage/wie-funktioniert-eine-website-2).Der Server sendet darauf eine Antwort, in der Regel ist dies ein HTML-Dokument. Der Browser liest das Dokument und zeigt es an.
Ein HTML-Dokument enthält aber in der Regel weitere Ressourcen, wie z.B. Bilder, Stylesheets oder Scripte. Der Browser sendet also für jede Ressource eine weitere Anfrage an den Server. Stylesheets dienen zum Beispiel dafür, das Aussehen der Website zu definieren – also wo sich welcher Text befindet und welche Abstände, Ränder, Farben, Schriftarten, usw. verwendet werden.
Scripte (JavaScript) sind für interaktive Elemente. Damit kannst du komplette Programme schreiben und im Client ausführen. Viele moderne Websites verwenden extrem viel JavaScript, sodass nach Bedarf dynamisch neuer Inhalt angezeigt werden kann, ohne eine komplett neue Seite zu laden. Wenn du zum Beispiel hier auf gutefrage eine Antwort schreibst und auf "Absenden" klickst, wird die Antwort direkt angezeigt, ohne die Seite neu zu laden. Das ist in JavaScript implementiert.