Bevor der Browser die Seite rendern kann, muss er die DOM- und CSSOM-Baumstrukturen erstellen. Daher müssen wir sowohl den HTML- als auch den CSS-Code so schnell wie möglich an den Browser übermitteln.
Zusammenfassung
- Byte → Zeichen → Tokens → Knoten → Objektmodell.
- Das HTML-Markup wird in ein Document Object Model (DOM) und das CSS-Markup in ein CSS Object Model (CSSOM) umgewandelt.
- DOM und CSSOM sind unabhängige Datenstrukturen.
- Im Bereich „Leistung“ der Chrome DevTools können wir die Bau- und Verarbeitungskosten für 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 wir 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 von HTML aus dem Laufwerk oder Netzwerk 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 spitzen Klammern. Jedes Token hat eine besondere Bedeutung und eigene Regeln.
- Lexing:Die ausgegebenen Tokens werden in „Objekte“ konvertiert, die ihre Properties und Regeln definieren.
- DOM-Konstruktion:Da im HTML-Markup Beziehungen zwischen verschiedenen Tags definiert werden (einige Tags sind in anderen Tags enthalten), sind die erstellten Objekte in einer Baumdatenstruktur verknüpft, in der auch die im ursprünglichen Markup definierten hierarchischen Beziehungen erfasst werden: Das HTML-Objekt ist dem body-Objekt übergeordnet, das body dem paragraph-Objekt und so weiter.
Das Endergebnis dieses gesamten Prozesses ist das Document Object Model (DOM) unserer einfachen Seite, das der Browser für die weitere Verarbeitung der Seite verwendet.
Bei jeder Verarbeitung von HTML-Markup durchläuft der Browser alle oben genannten Schritte: Bytes in Zeichen konvertieren, Tokens identifizieren, Tokens in Knoten umwandeln und den DOM-Baum erstellen. Der gesamte Vorgang kann einige Zeit in Anspruch nehmen, besonders wenn wir sehr viel HTML verarbeiten müssen.
Wenn Sie die Chrome-Entwicklertools öffnen und beim Laden der Seite eine Zeitachse aufzeichnen, sehen Sie die tatsächliche Zeit, die für diesen Schritt benötigt wird. Im obigen Beispiel hat es etwa 5 ms gedauert, einen HTML-Chunk in einen DOM-Baum zu konvertieren. Bei einer größeren Seite kann dieser Vorgang deutlich länger dauern. Bei der Erstellung flüssiger Animationen kann dies schnell zu einem Engpass werden, wenn der Browser große HTML-Mengen verarbeiten muss.
Die DOM-Baumstruktur erfasst die Eigenschaften und Beziehungen des Dokument-Markups, sagt jedoch nichts darüber, wie das Element beim Rendern aussieht. Dies ist die Aufgabe von CSSOM.
CSS-Objektmodell (CSSOM)
Während der Browser das DOM unserer einfachen Seite erstellt hat, ist im head-Abschnitt des Dokuments ein Link-Tag gefunden, das auf ein externes CSS-Stylesheet verweist: style.css. Er geht davon aus, dass diese Ressource zum Rendern der Seite benötigt wird, und sendet sofort eine Anfrage für diese Ressource, die den folgenden Inhalt zurückgibt:
body {
font-size: 16px;
}
p {
font-weight: bold;
}
span {
color: red;
}
p span {
display: none;
}
img {
float: right;
}
Wir hätten unsere Stile direkt im HTML-Markup (inline) deklarieren können, aber wenn unser CSS von HTML unabhängig ist, können wir Inhalt und Design als separate Aspekte behandeln: Designer können an CSS arbeiten, Entwickler können sich auf HTML konzentrieren usw.
Wie bei HTML müssen wir die empfangenen CSS-Regeln so konvertieren, dass sie vom Browser verstanden werden und funktionieren. Daher wiederholen wir den HTML-Prozess, aber für CSS statt HTML:
Die CSS-Byte werden in Zeichen, dann in Tokens und schließlich in Knoten konvertiert. Abschließend werden sie in einer Baumstruktur verknüpft, die als "CSS Object Model" (CSSOM) bezeichnet wird:
Warum hat das CSSOM eine Baumstruktur? Bei der Berechnung des endgültigen Satzes von Stilen für ein Objekt auf der Seite beginnt der Browser mit der allgemeinsten Regel, die für diesen Knoten gilt. Wenn es beispielsweise ein untergeordnetes Element eines Body-Elements ist, werden alle Textstile angewendet. Anschließend verfeinert er die berechneten Stile rekursiv, indem spezifischere Regeln angewendet werden, d. h. die Regeln „kaskadieren“.
Konkret sehen Sie sich die CSSOM-Baumstruktur oben an. Jeder Text im <span>-Tag, der im Textkörperelement platziert wird, hat eine Schriftgröße von 16 Pixeln und roter Text. Die Anweisung font-size geht von body zu span über. Wenn ein span-Tag jedoch einem Absatz-Tag (p) untergeordnet ist, wird sein Inhalt nicht angezeigt.
Beachten Sie außerdem, dass die obige Baumstruktur nicht die vollständige CSSOM-Baumstruktur ist und nur die Stile enthält, die wir in unserem Stylesheet überschreiben möchten. Jeder Browser bietet einen Standardsatz von Stilen, die auch als „User-Agent-Stile“ bezeichnet werden. Das sehen wir, wenn wir keine eigenen Stile zur Verfügung stellen. Diese Stile werden einfach von unseren Stilen überschrieben.
Wenn Sie herausfinden möchten, wie lange die CSS-Verarbeitung dauert, können Sie in den Entwicklertools eine Zeitachse aufzeichnen und nach dem Ereignis „Stil neu berechnen“ suchen: Im Gegensatz zum DOM-Parsing zeigt die Zeitachse keinen separaten Eintrag „CSS parsen“ an. Stattdessen werden die Parsing- und CSSOM-Baumkonstruktion sowie die rekursive Berechnung von berechneten Stilen unter diesem einen Ereignis erfasst.
Die Verarbeitung unseres einfachen Stylesheets dauert etwa 0, 6 ms und wirkt sich auf acht Elemente auf der Seite aus – nicht viel, aber auch nicht kostenlos. Woher stammen jedoch die acht Elemente? CSSOM und DOM sind unabhängige Datenstrukturen. Wie Sie sehen, blendet der Browser einen wichtigen Schritt aus. Kommen wir nun zur Renderingstruktur, die DOM und CSSOM miteinander verbindet.