Objektmodell erstellen

Ilya Grigorik
Ilya Grigorik
X Startseite

Veröffentlicht: 31. März 2014

Bevor der Browser die Seite rendern kann, muss er das DOM erstellen und CSSOM-Bäume. Daher müssen wir sicherstellen, dass sowohl der HTML-Code als auch CSS so schnell wie möglich an den Browser zu senden.

Zusammenfassung

  • Byte → 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>

Ausprobieren

Beginnen Sie mit dem einfachsten Fall: einer einfachen HTML-Seite mit etwas Text und einem einzelnen Bild. Wie verarbeitet der Browser diese Seite?

DOM-Erstellungsprozess

  1. Umwandlung: Der Browser liest die Rohbytes der HTML-Datei vom Laufwerk oder aus dem Netzwerk und übersetzt sie basierend auf der angegebenen Codierung der Datei (z. B. UTF-8) in einzelne Zeichen.
  2. 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.
  3. Lexikanalyse: Die emittierten Tokens werden in „Objekte“ umgewandelt, die ihre Eigenschaften und Regeln definieren.
  4. 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.

DOM-Baum

Das Endergebnis dieses Prozesses ist das Document Object Model (DOM). unserer einfachen Seite, auf die der Browser für alle weiteren Seite.

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 in Anspruch nehmen, insbesondere wenn wir eine große Menge an HTML-Code verarbeiten müssen.

DOM-Konstruktion in den Entwicklertools verfolgen

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. brauchten wir etwa 5 ms, um einen HTML-Block in eine DOM-Baumstruktur umzuwandeln. Bei einer größeren Seite kann dieser Vorgang deutlich länger dauern. Beim Erstellen Animationen flüssiger gestalten, kann dies zu einem Engpass werden, wenn der Browser große Mengen an HTML verarbeiten können.

Die DOM-Struktur erfasst die Eigenschaften und Beziehungen des Dokument-Markups. aber sie sagt nichts darüber aus, wie das Element ausgeliefert wird. Das ist die Verantwortung der CSSOM.

CSS-Objektmodell (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. Wir gehen davon aus, dass diese Ressource benötigt wird, um die sendet er sofort eine Anfrage für diese Ressource, die mit folgendem Inhalt:

body {
  font-size: 16px;
}

p {
  font-weight: bold;
}

span {
  color: red;
}

p span {
  display: none;
}

img {
  float: right;
}

Wir hätten unsere Stile direkt in der HTML-Auszeichnung (inline) deklarieren können, aber Wenn unser CSS von HTML unabhängig bleibt, können wir Inhalte und Design zwei separate Anliegen: Designer können an CSS arbeiten, die Entwickelnden können sich auf HTML konzentrieren, sowie andere Bedenken.

Wie bei HTML müssen wir die empfangenen CSS-Regeln in etwas konvertieren, der Browser verstehen und mit denen er arbeiten kann. Daher wiederholen wir den HTML-Prozess, aber für CSS statt HTML:

CSSOM-Erstellungsschritte

Die CSS-Byte werden in Zeichen, dann Tokens, dann Knoten und und schließlich werden sie mit einer Baumstruktur verknüpft, die als „CSS-Objektmodell“ bezeichnet wird. (CSSOM):

CSSOM-Baum

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 <span>-Tag 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 jedoch span ein untergeordnetes Element eines (p) enthält, wird sein Inhalt nicht angezeigt.

Beachten Sie außerdem, dass die oben beschriebene Baumstruktur nicht der vollständige CSSOM-Baum ist und zeigt nur die Stile an, die wir im Stylesheet überschreiben möchten. Jeder Browser bietet eine Reihe von Standardstilen, die auch als „User-Agent-Stile“ bezeichnet werden. Diese werden angezeigt, wenn wir keine eigenen Stile bereitstellen. Unsere Stile überschreiben diese Standardwerte.

Um herauszufinden, wie lange die CSS-Verarbeitung dauert, können Sie Entwicklertools und suchen Sie nach „Stil neu berechnen“. Ereignis: Im Gegensatz zum DOM-Parsing kann das Objekt zeigt kein separates „Parse CSS“- und erfasst stattdessen und CSSOM-Baumkonstruktion sowie die rekursive Berechnung und berechnete Stile unter diesem einen Ereignis.

CSSOM-Konstruktion in den Entwicklertools erfassen

Die Verarbeitung unserer Trivial-Style-Heet-Methode dauert ca.0,6 ms und wirkt sich nicht viel, aber auch nicht kostenlos. Aber wo haben die 8 Elemente stammen? CSSOM und DOM sind unabhängige Datenstrukturen. Es stellt sich heraus, dass der Browser einen wichtigen Schritt ausblendet. Als Nächstes Rendering-Baum wird verknüpft das DOM und CSSOM.

Feedback