Er hilft uns, Informationen zu sammeln, uns miteinander zu vernetzen oder einfach unsere Langeweile zu bekämpfen. Wie genau der Browser all diese Aufgaben bewältigt, bleibt uns dabei jedoch meist verborgen. Dabei kann uns dieses Wissen helfen, unsere Privatsphäre zu schützen und uns online sicherer zu bewegen. Daher möchten wir euch heute zeigen, wie so ein Browser eigentlich funktioniert.
Was genau ist eine Website?
HTML, CSS und Javascript
Um zu verstehen, wie ein Browser eigentlich funktioniert, müssen wir zunächst wissen, was wir genau mit dem Browser anschauen möchten – nämlich Webseiten. Diese bestehen im Grundsatz meist aus drei Teilen – HTML-Dateien, Cascading Stylesheets (CSS), im nachfolgenden Stylesheets genannt, und Javascript-Dateien. HTML (Hyper Text Markup Language) ist sozusagen der Kern einer Website. Sie legt fest, welche Inhalte eine Website hat, zum Beispiel Überschriften, Paragraphen, Buttons oder Eingabefelder. Theoretisch kann eine Website auch nur aus HTML-Elementen bestehen – sie wäre dann aber statisch und würde sehr wenig Interaktion zulassen. Außerdem wäre sie nicht besonders schön anzusehen, da sie nur den Inhalt, nicht aber die Präsentation vorgeben würde. Hier kommen Cascading Stylesheets (CSS) ins Spiel, die festlegen, wie die Website aussehen soll. In ihr können Farben, Schriftarten und Animationen festgelegt werden. Will man eine einfache persönliche Website in Form einer digitalen Visitenkarte erstellen, reichen diese beiden Bestandteile oft bereits aus. Die meisten modernen Websiten sind jedoch viel komplexer – Onlineshops oder Social Media Plattformen sind sehr interaktiv und verändern ihre Inhalte ständig auf Basis von Eingaben und User-Interaktionen. Um dies zu erreichen, wird JavaScript benötigt – die Programmiersprache, wenn es um Webinhalte geht. Sie ist speziell darauf ausgelegt, mit HTML-Elementen zu interagieren und diese zu verändern.
Aufbau von HTML-Dokumenten und das Document Object Model
Diese drei Dateitypen bilden also den Kern einer Website, so wie sie in unserem Browser ankommt. Neben dem eigentlichen Inhalt benötigt dieser aber noch weitere Informationen – z.B. über zulässige Zeichen, den Titel der Website oder wo genau die zugehörigen Stylesheets und JavaScript-Dateien zu finden sind. Historisch bedingt finden sich diese Meta-Informationen in der Index-HTML-Seite im sogenannten Head des Dokuments. Neben dem Head besitzt das Index-Dokument auch noch einen Body, der den eigentlichen Inhalt der Website anzeigt, den man im Browser sehen kann. Gemeinsam bilden Head und Body Elemente das sogenannte Document Object Model (DOM), eine Programmierschnittstelle zwischen HTML und JavaScript. Das DOM folgt dabei einem ganz bestimmten Aufbau, in dem die HTML-Elemente angeordnet sein müssen, damit eine zulässige Seite entsteht, die durch JavaScript manipuliert werden kann.
Server
Diese drei Dateitypen bilden im Kern das sogenannte Frontend einer Webanwendung, also den Teil, der vom Browser abgerufen und angezeigt wird. Daneben gibt es aber so gut wie immer noch ein Backend, also Code, der zur Anwendung gehört, aber auf einem Server läuft. Hier finden dann Datenbankabfragen und -veränderungen statt, wie beispielsweise das Hochladen oder Abrufen eines Videos. Dazu übernimmt das Backend noch eine Menge anderer Aufgaben, an die wir an dieser Stelle nicht näher eingehen möchten, um den Rahmen des Artikels nicht zu sprengen.
Zusammengefasst ist ein Server dafür verantwortlich, die gesamte Webanwendung, also das Frontend und das Backend, zu betreiben und auf Anfrage den relevanten Code an den Browser zu senden. Woher aber weiß der Browser, auf welchem Server die Anwendung zu finden ist?
Wie findet mein Browser eine Website?
Grundlagen
Die Erreichbarkeit eines Computers innerhalb eines Netzwerks wird über seine IP-Adresse gesteuert. Die IP-Adresse ist eine längere Zeichenfolge, die den Computer innerhalb des Netzwerks eindeutig identifiziert und den Datentransfer zu und von ihm ermöglicht. Im Falle von IPv4 besteht diese Zeichenfolge in der Regel aus Zahlen, z.B. 192.0.2.42, im Falle der neueren IPv6 können aber auch Buchstaben vorkommen, sofern die Adresse die Länge von 128 Bit einhält. Der Browser muss also herausfinden, wie die IP-Adresse des Servers lautet, auf der die gesuchte Website zu finden ist. Das geschieht über die URL bzw. die darin enthaltene Domain.
URL
Möchte man eine bestimmte Website besuchen, erreicht man sie entweder direkt über die Adresszeile des Browsers, oder man füttert eine Suchmaschine mit entsprechenden Schlagwörtern. In jedem Fall benutzen wir schlussendlich eine URL, um auf die Website zu gelangen. URL steht für Uniform Resource Locator und enthält alle zum Abruf einer Seite notwendigen Informationen, darunter eine einzigartige Zeichenfolge, die der Website zugeordnet ist, die Domain. Zusätzlich enthält sie auch das verwendete Protokoll und unter Umständen auch weitere Pfade, z.B. zu einer bestimmten Unterseite. Beispielsweise handelt es sich bei www.wikipedia.de um eine Domain, bei www.wikipedia.de/URL um eine Unterseite und bei https://www.wikipedia.de/ um eine URL.
DNS
Die Domain allein bietet dem Browser jedoch nicht genug Informationen, um den Server zu finden, auf dem sich die Website befindet, die abgerufen werden soll, da Computer ihre Erreichbarkeit über ihre IP-Adresse steuern. Um die zur Domain zugehörige IP herauszufinden, gibt es das Domain Name System (DNS). Es handelt sich dabei um einen weltweiten, hierarchischen Verzeichnisdienst, der sämtliche Adressen im Internet verwaltet. Gibt man im Browser also den Namen einer Domain an, erweitert dieser die Domain zunächst zu einer URL und schickt anschließend eine Anfrage mit diesem Namen an den nächsten Nameserver, der dann seinerseits die korrekte IP-Adresse heraussucht. Dieses Vorgehen hat einige Vorteile – zum einen können sich Menschen Wörter viel besser merken als Zahlenfolgen, zum anderen ist es bei großen Websiten üblich, dass diese auf mehreren Servern oder Server-Clustern laufen und ihnen entsprechend mehrere IP-Adressen zugeordnet sind. Der Nameserver kann dann mit Hilfe der Domain die Adresse finden, die am schnellsten antwortet und diese an den Browser weiterleiten.
Wurde nun der richtige Ablageort einer Website gefunden, kann der Server die Anfrage des Browsers bearbeiten und schickt seine Antwort an den Browser zurück.
Woher weiß mein Browser, wie er Webseiten anzeigen soll?
Grundlagen - Bäume, Tokens und Parser
Nachdem der Browser eine Antwort vom Server erhalten hat, muss er diese seinerseits verarbeiten und richtig anzeigen. Dazu sind mehrere komplexe Schritte notwendig, deren Grundlagen zunächst erklärt werden sollen. Die Rendering Engine, das Kernstück des Browsers, ist für die Anzeige der Website verantwortlich. Dazu erstellt sie sogenannte Bäume – das sind Graphen, die einem umgekehrten Baum ähneln. Am obersten Punkt steht dabei das Wurzelelement, aus dem alle anderen Elemente wachsen. Diese untergeordneten Elemente nennt man Blätter. Ein Baum eignet sich besonders, um hierarchische Strukturen darzustellen und die Position eines Elements in Relation zu allen anderen Elementen zu finden.
Weiterhin kommen bei der Auswertung und Darstellung von Webseiten auch Tokenizer und Parser zum Einsatz. Ein Tokenizer liest vereinfacht gesagt eine Eingabe ein, vergleicht jedes Zeichen mit einem Satz erlaubter Zeichen und konstruiert auf diese Weise größere zusammenhängende Objekte. So können nicht erlaubte Zeichen oder Zeichenfolgen erkannt werden und die Anzahl der in späteren Schritten verwendeten Objekte minimiert werden. Die Aufgabe des Parsers hingegen ist es, eine Eingabe mit bestimmten Regeln zu vergleichen und, wenn diese Regeln erfüllt wurden, eine vorher definierte Ausgabe liefert.
Der Tokenizer fasst also eine längere Eingabe zu größeren Objekten oder Paketen zusammen, woraufhin der Parser diese Objekte dann mit vorher definierten Regeln über die Anordnung dieser Objekte vergleicht und eine Ausgabe der Objekte liefert.
Wie nutzt der Browser also diese Konzepte, um eine Website darzustellen?
Rendering Engine
Im ersten Schritt wird nun das gesendete HTML Zeichen für Zeichen eingelesen und in verschiedene Objekte, sogenannte Tokens, eingeteilt. Damit kann sichergestellt werden, dass in den darauf folgenden Schritten ein korrekt aufgebautes Dokument entsteht. Wie wir weiter oben gesehen haben, ist dies besonders wichtig, damit später JavaScript-Befehle richtig ausgeführt werden können und unser Browser weiß, welche Zeichen angezeigt werden müssen. Im zweiten Schritt werden diese HTML-Tokens dann durch einen Parser in einen Baum übersetzt, der der Struktur des Document Object Model folgt und alle eingelesenen HTML-Elemente enthält.
Nachdem wir so unser HTML-Dokument rekonstruiert haben, erfolgt die Verarbeitung der dazugehörigen Stylesheets auf Basis komplexer Regelsysteme. Vereinfacht gesagt ermittelt der CSS-Parser, welche Styles zu welchem HTML-Element gehören und konstruiert auf dieser Basis einen weiteren Baum, der so viele Blätter enthält, wie für HTML-Elemente Regeln festgelegt wurden.
Nun hat der Browser alle Elemente und ihre dazugehörigen Style-Regeln ermittelt – er weiß aber noch nicht, in welcher Reihenfolge diese angezeigt werden sollen. Das ist besonders wichtig, da manche HTML-Elemente aus mehreren Ebenen bestehen, die nicht immer alle sichtbar sind. So hat ein Dropdown-Element Optionen, die sich nur ausklappen, wenn man es anklickt. Aus diesem Grund konstruiert die Rendering Engine noch einen dritten Baum – den sogenannten Render Tree. Er ist die Grundlage für die darauffolgende Konstruktion des Layouts und der abschließenden Anzeige der Seite.
Im Layout-Schritt werden nun auf Basis des Render Trees die Positionen der einzelnen Elemente auf dem Bildschirm berechnet. Dafür wird zunächst die Größe des Browserfensters ermittelt und anschließend werden HTML-Elemente in einem Koordinatensystem in diesem Fenster angeordnet.
Obwohl die Rendering Engine nun schon eine Menge Arbeit geleistet hat, wird noch kein einziger Pixel angezeigt. Die tatsächliche Anzeige erfolgt erst im letzten Schritt – dem sogenannten Paint. Hier wird der erstellte Render Tree Schritt für Schritt abgearbeitet und das jeweilige Element Pixel für Pixel auf dem Bildschirm angeordnet. Der Browser interagiert dabei mit dem jeweiligen Betriebssystem, welches die eigentliche Anzeige der Pixel übernimmt.
Javascript Interpreter
Nachdem die Website nun endlich sichtbar ist, muss sie noch interaktiv gemacht werden. In der Regel erfolgt dieser Schritt erst nachdem HTML- und CSS-Dateien erfolgreich verarbeitet wurden, um sogenannte Layout-Shifts oder sich gegenseitig blockierende Anweisungen zu verhindern. Der Browser geht nun alle im Head angegebenen JavaScript-Dateien durch und führt den Code aus.
Die meisten dieser Prozesse laufen immer und immer wieder ab, während eine Website im Browser geöffnet ist, damit Veränderungen in einem der Bäume direkt angezeigt werden können.
Web Standards
Die Aufgaben, die ein Browser zum Anzeigen einer Webseite erledigen muss, sind also sehr komplex. Damit sie trotzdem für jede Website zuverlässig ausgeführt werden können und es keine Ausnahmen gibt, existieren für HTML, CSS und JavaScript sogenannte Web Standards, die durch eine Organisation namens W3C festgelegt und aktualisiert werden. Sie bilden formale Regeln, nach denen Dokumente und Websiten aufgebaut sein müssen und nach denen sich alle Browser richten können. Mit der stetigen Weiterentwicklung der Anforderungen an Webseiten werden auch die Standards laufend fortgeführt und angepasst.
Puuuh ganz schön viele Informationen oder? Auf unserem Blog findest du weitere Insights zum Informatikstudium oder aktuellen Tech-Trends.