Die wichtigsten Aspekte von der Theorie über die populären Browser bis hin zum Ablauf des Renderings sind hier aufgeführt. Dabei sind nur die bekanntesten Implementationen von Belang.
Ein Webbrowser dient als Zugang ins Internet und zur Anzeige von Webressourcen wie HTML, CSS und JavaScript. Er besteht aus einer Benutzeroberfläche, einer Browser- und einer Rendering-Engine. Für eine verständliche Darstellung der Inhalte auf dem UI verwendet die Browser-Engine einen sogenannten Renderer – mehr dazu später. Die Benutzeroberfläche dient als Schnittstelle zwischen dem Benutzer und der Datenschicht. Die Rendering-Engine interpretiert die Inhalte anhand des vorgegebenen Inhaltstyps. Einer der Engines ist der HTML-Renderer. Beim UI und der Bedienung zeigen sich die Uneinigkeiten zwischen den Browser-Herstellern. Der Grund liegt darin, dass die Rendering-Engine den Code nicht gleich interpretiert. Anschliessend sind Informationen über den detaillierten Ablauf zur Anzeige eines HTML-Dokuments und die Rolle des Renderings dokumentiert.
Der Aufruf einer Webseite beginnt mit dem HTTP-Request, auf welchen eine HTTP-Response folgt. Die zuvor genannten Schritte vor der eigentlichen Datenerhebung sind in diesem Bericht nicht weiter von Bedeutung. Der Response liefert letztlich die anzuzeigenden Daten, welche in diesem Fall die tragende Rolle spielen.
Der Browser verarbeitet die erhaltenen Daten im HTML-Format weiter. Mehrere Schritte wandeln die einzelnen HTML-Elemente in sogenannte Nodes um. Aus den resultierenden Nodes entsteht durch Verknüpfungen eine Baumstruktur – der DOM. Das Document Object Model (DOM) (Abbildung 2.4 links oben) beschreibt die Eltern-Kind- und Geschwister-Beziehung der Nodes. Der Prozess des CSS Object Models (CSSOM) gestaltet sich relativ ähnlich, ist aber nicht weiter wichtig.
Der DOM und der CSSOM sind unabhängig voneinander. Der Browser kombiniert die beiden Bäume zu einem gemeinsamen Renderbaum (Abbildung 2.4 rechts). Der resultierende Baum repräsentiert nur sichtbare Elemente, wohingegen der DOM alle Elemente enthält. Der Renderbaum ist browserabhängig.
Dieses Wissen ist wichtig für das spätere Kapitel Performance. Der Grund ist, dass der Browser maximal 60 Mal pro Sekunde rendern kann. Jede Änderung am Browser-DOM [2] startet den kompletten Rendering-Prozess von vorne. Zu viele Änderungen am DOM führen dazu, dass der Nutzer länger warten muss, bis die Webseite geladen ist.
Gründe für ein erneutes Rendern [3]:
Manipulation der Elemente des DOM
Änderungen des Inhalts (auch von Formularfeldern)
Änderungen der CSS-Eigenschaften
Hinzufügen oder Entfernen der Stylesheets
Ändern des Attributs class
Ändern der Grösse des Browserfensters
Scrollen des Browserfensters oder der Elemente
Aktivieren der Pseudo-Klassen
Die neue Komponente soll in möglichst allen Browsern eine konsistente Erscheinung wie auch Interaktion bieten. Durch die Erklärung aus Kapitel Rendering-Prozess ist klar, dass die Renderer die Unterschiede im UI bewirken. Die Bedienungsabweichungen stammen grösstenteils vom zugrunde liegenden Betriebssystem. Diese Erkenntnisse führen dazu, dass die neue Komponente auf Mac und Windows mit den geläufigsten Renderern zu testen ist. Zu den ausgewählten Webbrowsern zählen Google Chrome, Firefox (Mac und Windows), Safari (nur Mac) und Edge (nur Windows). Die Erläuterung dazu folgt im nächsten Abschnitt.
Die populärsten Browser mit 65% Marktabdeckung basieren auf der Chromium-Basis und verwenden alle den HTML-Renderer Blink [4]. Die Entwickler dieser Rendering-Engine sind die Open-Source-Community Chromium, Google, Intel und Samsung. Zu den Browsern [5], die Blink als Rendering-Engine nutzen, gehören unter anderem Google Chrome, Brave, Microsoft Edge, Opera und Vivaldi. WebKit [6] – der Vorgänger des geläufigsten Renderers Blink – findet sich im OSX-Webbrowser Safari wieder. Diese von Apple, Google, KDE und Nokia entwickelte Rendering-Engine deckt 15% ab. Firefox und weitere auf Mozilla basierende Browser [7], die Webseiten mit Gecko rendern, sind die bekanntesten Vertreter der verbleibenden Browser. Es existieren noch weitaus mehr Renderer, welche aber eine sehr geringe Verbreitung aufweisen. Deswegen sind diese nicht weiter von Belang.
[2] Im Renderbaum verwendeter und im Browser angezeigter DOM [3] (Dev, 2020) [4] (Wikipedia, 2024a) [5] (Ola und Markus, 2024a) [6] (Wikipedia, 2024b) [7] (Ola und Markus, 2024b)