Das Einsteigerhandbuch zum CSS-Objektmodell (CSSOM)

Viel passiert zwischen dem erste HTTP-Anfrage und das letzte Lieferung einer Webseite. Die Datenübertragung und die Rendering-Pipeline des Browsers erfordern viele verschiedene Technologien. Eine davon ist die CSS-Objektmodell, oder der CSSOM.

Das CSS-Objektmodell verwendet den CSS-Code und rendert jeden Selektor in eine Baumstruktur für eine einfachere Analyse. Vielleicht ist es für Entwickler nicht entscheidend, dieses Konzept vollständig zu verstehen, aber es ist ein wertvolles Thema, wenn Sie mehr darüber erfahren möchten wie Browser Code in eine funktionierende Website umwandeln.

In diesem Beitrag werde ich die Grundlagen des CSS-Objektmodells erläutern und Ihnen zeigen, wie es funktioniert.

Was ist CSSOM??

Der Begriff CSS-Objektmodell beschreibt a Karte aller CSS-Selektoren und relevanten Eigenschaften für jeden Selektor. Diese Stile können Stammelemente sein oder verschachtelte Kinder haben.

CSSOM ist dem sehr ähnlich DOM in HTML, das steht für Document Object Model. Beide sind Teil der kritischer Rendering-Pfad Das ist eine Reihe von Schritten, die passieren müssen eine Website richtig rendern. Alle diese Prozesse passieren automatisch, hinter den Kulissen.

Warum ist CSSOM so wichtig? Es ist die vom Browser verwendete Karte CSS-Stile richtig rendern auf einer Webseite. Es gibt keine einfache Möglichkeit, einem Computer mitzuteilen, dass alle Absätze in einem .Hauptinhalt div muss zusätzliche Zeilenhöhe haben.

Die Lösung ist das CSS Object Model welches kartiert alle Elemente und Eigenschaften von Ihrem CSS-Code.

CSSOM macht es für den Browser einfacher Renderstile auf der Seite. Das Ganze ist sehr technisch, aber es lohnt sich ein wenig über den Prozess zu verstehen, insbesondere wenn Sie Websites erstellen.

Wie es funktioniert

Sowohl das DOM als auch das CSSOM sind wird von allen Webbrowsern umfangreich verwendet um Webseiten zu interpretieren und darzustellen. Das folgende Diagramm stammt aus dem Google Developers Web Fundamentals-Handbuch und erläutert, wie das DOM wird in einem Webbrowser dargestellt.

Alle Informationen in DOM und CSSOM sind konvertiert von Bytes in digitale Karten die jedes Element in einem Webdokument darstellen. Der Prozess funktioniert wie folgt:

Der Browser lädt das HTML herunter für eine Webseite.
Während der Verarbeitung des HTML-Codes kann der Parser auf ein Link-Element stoßen Verweis auf ein externes Stylesheet.
Dieses CSS-Stylesheet ist dann in eine Karte geparst Verwenden der CSS-Objektmodellspezifikationen.
Der resultierende Code kann dann sein angewendet auf Elemente im DOM.

All dies geschieht sehr schnell und geschieht mit jeder einzelnen Seitenanfrage. Dieses andere Diagramm zeigt eine Beispielbaumstruktur des CSSOM.

Beachten Sie, dass einige Eigenschaften im Diagramm hellere graue Schriftfarben aufweisen. Diese Eigenschaften sind vom Elternteil geerbt. Da der Körper eine bestimmte Schriftgröße hat, erhalten alle Elemente im Körper diese Schriftgröße, sofern sie nicht überschrieben wird.

HTML- und CSS-Zeichenfolgen sind in Token umgewandelt das kann dann sein als Knoten verstanden vom Browser. Diese Knoten sind wie Objekte innerhalb der Baumstruktur das definiert, wie die gesamte Seite erstellt werden soll.

Das CSSOM und das DOM sind vollständig getrennte Datenmodelle, deshalb sind sie getrennt voneinander analysiert. Aber beide haben es ähnliche Baumstrukturen, und beide dienen demselben Zweck: Sie geben dem Browser eine Struktur zum Rendern und Identifizieren verschiedener Elemente auf der Seite.

Warum sollten Webentwickler interessiert sein?

Da das ganze Rendering passiert im Backend, Sie brauchen sich nicht viel um den CSSOM-Baum zu kümmern. Es kann jedoch nützlich sein zu verstehen, wie es funktioniert.

Eine Sache zu erinnern ist, dass die CSSOM muss vollständig geladen sein bevor die Webseite angezeigt wird, da sie definiert, wie jedes Element auf der Seite aussehen soll. Wenn die Seite vor dem CSSOM geladen wurde, wurde sie zunächst als reines HTML angezeigt, gefolgt von den Stilen einige Sekunden später.

Browser vermeiden dies ausdrücklich, da dies für Endbenutzer verwirrend wäre. Und es ist erwähnenswert, dass die CSSOM kann nicht zwischengespeichert werden; es muss sein auf jeder Seite neu erstellt.

Aktuelle CSS-Dateien können zwischengespeichert werden, um die Assets schneller zu laden, aber eine Seite im Browser zu rendern Der CSSOM-Parser muss immer ausgeführt werden. Dies bedeutet auch, dass JavaScript das Rendern und die Leistung beeinträchtigen kann.

Ich würde dringend empfehlen, diesen Artikel zu lesen, um mehr über externe CSS / JS-Ressourcen und deren Ladezeiten zu erfahren.

Die beste Möglichkeit, Ihre Website zu optimieren, ist das Erstellen einer natürliche Kaskade von Ressourcen die werden im Tandem geladen.

Es ist möglich, CSSOM mit JavaScript zu manipulieren, da es sich technisch um eine JS-API handelt. Verglichen mit der JavaScript-DOM-Manipulation hat dies jedoch keinen großen Zweck.

Der größere Grund, etwas über CSSOM zu lernen, besteht darin, sich darüber zu informieren, wie Websites tatsächlich funktionieren.

Es gibt viele Dinge, die wir für selbstverständlich halten, damit das Internet reibungslos funktioniert. Wenn Sie ein bisschen mehr über den gesamten Prozess verstehen, können Sie sich vorstellen, wie das Ganze zusammenkommt, und hoffentlich etwas Verständnis für die Existenz des World Wide Web gewinnen.

Lesen Sie weiter

Ich hoffe, dass Ihnen dieses Intro eine solide Vorstellung davon gibt, was das CSS-Objektmodell ist und wie es sich auf Webseiten auswirkt. Dort ist nicht viel zu manipulieren im CSSOM, es unterscheidet sich also ein wenig vom DOM.

Es ist jedoch immer noch eine wichtige Technologie in der Webentwicklung und sollte die wesentlichen Aspekte des Browser-Renderings verdeutlichen.

Es gibt viele andere Ressourcen, die das CSSOM diskutieren und wie es funktioniert. Wenn Sie mehr erfahren möchten, sind hier einige Beiträge, die ich empfehle:

CSS-Objektmodell - Übersicht
Erkunden des CSSOM: Erstellen eines CSS-Objektanalysators
Was jeder Frontend-Entwickler über das Rendern von Webseiten wissen sollte