Veröffentlicht: 31. März 2014
Bevor der Browser die Seite rendern kann, muss er die DOM- und CSSOM-Bäume erstellen. Daher müssen wir dafür sorgen, dass sowohl der HTML-Code als auch der CSS-Code so schnell wie möglich an den Browser gesendet werden.
Zusammenfassung
- Bytes → Zeichen → Tokens → Knoten → Objektmodell
- HTML-Markup wird in ein Document Object Model (DOM) umgewandelt; CSS-Markup wird in ein CSS Object Model (CSSOM) umgewandelt.
- DOM und CSSOM sind unabhängige Datenstrukturen.
- Im Chrome DevTools-Steuerfeld „Leistung“ können wir die Erstellungs- und Verarbeitungskosten von DOM und CSSOM erfassen und prüfen.
Document Object Model (DOM)
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link href="style.css" rel="stylesheet" />
<title>Critical Path</title>
</head>
<body>
<p>Hello <span>web performance</span> students!</p>
<div><img src="awesome-photo.jpg" /></div>
</body>
</html>
Beginnen Sie mit dem einfachsten Fall: einer einfachen HTML-Seite mit etwas Text und einem einzelnen Bild. Wie verarbeitet der Browser diese Seite?
- Konvertierung: Der Browser liest die Rohbyte des HTML-Codes von der Festplatte oder dem Netzwerk aus und übersetzt sie anhand der angegebenen Codierung der Datei (z. B. UTF-8) in einzelne Zeichen.
- Tokenisierung: Der Browser wandelt Zeichenfolgen in verschiedene Tokens um, wie im W3C HTML5-Standard angegeben, z. B.
<html>,<body>, und andere Strings in spitze Klammern. Jedes Token hat eine spezielle Bedeutung und eigene Regeln. - Lexikanalyse: Die emittierten Tokens werden in „Objekte“ umgewandelt, die ihre Eigenschaften und Regeln definieren.
- DOM-Aufbau: Da das HTML-Markup Beziehungen zwischen verschiedenen Tags definiert (einige Tags sind in anderen Tags enthalten), werden die erstellten Objekte in einer Baumstruktur verknüpft, die auch die im ursprünglichen Markup definierten übergeordneten/untergeordneten Beziehungen erfasst: Das HTML-Objekt ist ein übergeordnetes Element des body-Objekts, das body-Objekt ist ein übergeordnetes Element des Absatz-Objekts usw., bis die gesamte Darstellung des Dokuments erstellt ist.
Das Endergebnis dieses gesamten Prozesses ist das Document Object Model (DOM) unserer einfachen Seite, das der Browser für die gesamte weitere Verarbeitung der Seite verwendet.
Jedes Mal, wenn der Browser HTML-Markup verarbeitet, werden alle zuvor definierten Schritte ausgeführt: Bytes in Zeichen umwandeln, Tokens identifizieren, Tokens in Knoten umwandeln und den DOM-Baum erstellen. Dieser gesamte Vorgang kann einige Zeit dauern, insbesondere wenn wir eine große Menge an HTML-Code verarbeiten müssen.
Wenn Sie die Chrome-Entwicklertools öffnen und eine Zeitachse aufzeichnen, während die Seite geladen wird, sehen Sie die tatsächliche Zeit, die für diesen Schritt benötigt wurde. Im vorherigen Beispiel haben wir etwa 5 ms benötigt, um einen HTML-Block in eine DOM-Baumstruktur umzuwandeln. Bei einer größeren Seite kann dieser Vorgang deutlich länger dauern. Beim Erstellen flüssiger Animationen kann dies zu einem Engpass führen, wenn der Browser große Mengen an HTML verarbeiten muss.
Der DOM-Baum erfasst die Eigenschaften und Beziehungen des Dokument-Markups, gibt aber nicht an, wie das Element beim Rendern aussehen wird. Das ist die Verantwortung des CSSOM.
CSS Object Model (CSSOM)
Beim Erstellen des DOM unserer einfachen Seite stieß der Browser auf ein <link>-Element im <head> des Dokuments, das auf ein externes CSS-Stylesheet verweist: style.css. Da er davon ausgeht, dass er diese Ressource zum Rendern der Seite benötigt, sendet er sofort eine Anfrage für diese Ressource, die mit dem folgenden Inhalt zurückgegeben wird:
body {
font-size: 16px;
}
p {
font-weight: bold;
}
span {
color: red;
}
p span {
display: none;
}
img {
float: right;
}
Wir hätten unsere Stile auch direkt im HTML-Markup (inline) deklarieren können. Da wir unser CSS jedoch unabhängig von HTML halten, können wir Inhalte und Design getrennt voneinander behandeln: Designer können an CSS arbeiten, Entwickler können sich auf HTML und andere Aspekte konzentrieren.
Wie bei HTML müssen wir die empfangenen CSS-Regeln in etwas umwandeln, das der Browser verstehen und verarbeiten kann. Daher wiederholen wir den HTML-Vorgang, diesmal jedoch für CSS anstelle von HTML:
Die CSS-Bytes werden in Zeichen, dann in Tokens, dann in Knoten und schließlich in einer Baumstruktur verknüpft, die als „CSS Object Model“ (CSSOM) bezeichnet wird:
Warum hat das CSSOM eine Baumstruktur? Beim Berechnen der endgültigen Stile für ein Objekt auf der Seite beginnt der Browser mit der allgemeinsten Regel, die für diesen Knoten gilt. Wenn es sich beispielsweise um ein untergeordnetes Element eines Body-Elements handelt, werden alle Body-Stile angewendet. Anschließend werden die berechneten Stile rekursiv durch Anwenden spezifischerer Regeln verfeinert, d. h. die Regeln werden „abwärts kaskadiert“.
Zur Veranschaulichung betrachten wir den zuvor beschriebenen CSSOM-Baum. Der im Tag <span> enthaltene Text, der sich im Body-Element befindet, hat eine Schriftgröße von 16 Pixeln und ist rot. Die font-size-Richtlinie wird vom body-Element bis zum span-Element kaskadiert. Wenn span jedoch ein untergeordnetes Element eines Paragraf-Tags (p) ist, wird der Inhalt nicht angezeigt.
Beachten Sie auch, dass der zuvor beschriebene Baum nicht der vollständige CSSOM-Baum ist, sondern nur die Stile enthält, die wir in unserem Stylesheet überschrieben haben. Jeder Browser stellt einen Standardsatz von Stilen bereit, die auch als „User-Agent-Stile“ bezeichnet werden. Das sehen wir, wenn wir keinen eigenen Stil angeben. Diese Stile werden durch unsere Stile überschrieben.
Wenn Sie herausfinden möchten, wie lange die CSS-Verarbeitung dauert, können Sie in den DevTools eine Zeitachse aufzeichnen und nach dem Ereignis „Stil neu berechnen“ suchen. Im Gegensatz zum DOM-Parsen enthält die Zeitachse keinen separaten Eintrag „CSS parsen“, sondern erfasst stattdessen das Parsen und Erstellen des CSSOM-Baums sowie die rekursive Berechnung der berechneten Stile unter diesem einen Ereignis.
Die Verarbeitung unseres trivialen Stil-Sheets dauert etwa 0,6 ms und wirkt sich auf acht Elemente auf der Seite aus. Das ist nicht viel, aber auch nicht kostenlos. Aber woher kommen die acht Elemente? CSSOM und DOM sind unabhängige Datenstrukturen. Wie sich herausstellt, blendet der Browser einen wichtigen Schritt aus. Als Nächstes wird der Rendering-Baum abgedeckt, der das DOM und das CSSOM miteinander verknüpft.