Dazwischen passieren viele Dinge erste HTTP-Anfrage und das letzte Lieferung einer Webseite. Der Datenübertragungs- und Rendering-Prozess des Browsers erfordert viele verschiedene Technologien, eine davon ist CSS-Objektmodelloder der CSSOM.
Das CSS-Objektmodell übernimmt den CSS-Code und repräsentiert jeden Selektor in einer Baumstruktur um die Analyse zu erleichtern. Für Entwickler ist es vielleicht nicht entscheidend, dieses Konzept vollständig zu verstehen, aber es ist ein wertvolles Thema, das Sie studieren sollten, wenn Sie mehr darüber erfahren möchten. wie Browser Code in eine funktionsfähige Website umwandeln.
In diesem Beitrag behandle ich die Grundlagen des CSS-Objektmodells und zeige Ihnen, wie es funktioniert.
Was ist CSSOM?
Der Begriff CSS-Objektmodell beschreibt a Ordnen Sie alle CSS-Selektoren und relevanten Eigenschaften für jeden Selektor zu. Diese Stile können Stammelemente sein oder verschachtelte untergeordnete Elemente haben.
CSSOM ist sehr ähnlich DOM in HTML, was für Document Object Model steht. Beide sind Teil der Kritischer Renderpfad Das ist eine Reihe von Schritten, die passieren müssen Eine Website richtig rendern. Alle diese Prozesse passieren automatischhinter den Kulissen.
Warum ist CSSOM wichtig? Es ist die Karte, die der Navigator verwendet CSS-Stile korrekt rendern Auf einer Website. Es gibt keine einfache Möglichkeit, einem Computer mitzuteilen, dass alle Absätze in einem .main-content-Div eine zusätzliche Zeilenhöhe haben sollen.
Die Lösung ist das CSS-Objektmodell bildet alle Elemente und Eigenschaften ab Ihres CSS-Codes.
CSSOM erleichtert dem Browser die Arbeit Rendern Sie Stile auf der Seite. Es ist alles sehr technisch, aber es lohnt sich, den Prozess ein wenig zu verstehen, insbesondere wenn Sie Websites erstellen.
Wie funktioniert es
Sowohl das DOM als auch das CSSOM sind Wird häufig von allen Webbrowsern verwendet zum Interpretieren und Rendern von Webseiten. Das folgende Diagramm ist Google-Entwicklerhandbuch zu Web-Grundlagenund erklären wie DOM wird in einem Webbrowser gerendert.
Sowohl im DOM als auch im CSSOM sind alle Informationen vorhanden von Bytes in digitale Karten umgewandelt die jedes Element eines Webdokuments darstellen. Der Prozess funktioniert wie folgt:
- Der Navigator Laden Sie den HTML-Code herunter für eine Webseite.
- Während der HTML-Verarbeitung stößt der Parser möglicherweise auf ein Link-Element Verweisen auf ein externes Stylesheet.
- Dieses CSS-Stylesheet ist dann auf einer Karte analysiert Verwendung der Spezifikationen des CSS-Objektmodells.
- Der resultierende Code kann dann sein auf Elemente im DOM angewendet.
All dies geschieht sehr schnell und geschieht bei jeder Seitenanfrage. Dieses andere Diagramm unten zeigt a Beispiel für eine CSSOM-Baumstruktur.
Beachten Sie, dass einige Eigenschaften im Diagramm hellere graue Schriftfarben haben. Diese Eigenschaften sind vererbt des Vaters. Da der Textkörper eine bestimmte Schriftgröße hat, erhalten auch alle Elemente innerhalb des Textkörpers diese Schriftgröße, sofern sie nicht überschrieben werden.
HTML- und CSS-Strings sind in Token umgewandelt was dann sein kann als Knoten verstanden durch den Browser. Diese Knoten sind wie Objekte innerhalb der Baumstruktur Dies definiert, wie die gesamte Seite aufgebaut sein soll.
Das CSSOM und das DOM sind vollständig separate Datenmodelledeshalb sind sie es getrennt voneinander analysiert. Aber das haben sie beide ähnliche Baumstrukturenund beide haben den gleichen Zweck: dem Browser eine Struktur zu geben, um verschiedene Elemente auf der Seite darzustellen und zu identifizieren.
Warum sich Webentwickler darum kümmern sollten
Da alles Rendern passiert im Backend, müssen Sie sich nicht wirklich viele Gedanken über den CSSOM-Baum machen. Aber es kann hilfreich sein zu verstehen, wie es funktioniert.
Eine Sache, an die man sich erinnern sollte, ist, dass die CSSOM muss vollständig geladen sein bevor die Webseite angezeigt wird, da dadurch festgelegt wird, wie jedes Element auf der Seite aussehen soll. Wenn die Seite vor dem CSSOM geladen wurde, wird sie zuerst als einfaches HTML angezeigt, gefolgt von den Stilen einige Sekunden später.
Browser vermeiden dies ausdrücklich, da es für Endbenutzer verwirrend wäre. Und es ist erwähnenswert, dass das CSSOM kann nicht zwischengespeichert werden; muss sein auf jeder Seite neu erstellt.
Tatsächliche CSS-Dateien können zwischengespeichert werden, um Ressourcen schneller zu laden, aber eine Seite im Browser darzustellen. erfordert immer die Ausführung des CSSOM-Parsers. Dies bedeutet auch, dass JavaScript das Rendering und die Leistung negativ beeinflussen kann.
Ich würde es wärmstens empfehlen diesen Artikel lesen Weitere Informationen zu externen CSS/JS-Ressourcen und deren Ladezeiten finden Sie hier.
Der beste Weg, Ihre Website zu optimieren, besteht darin, eine zu erstellen natürlicher Wasserfall von Ressourcen, die werden gleichzeitig aufgeladen.
Es ist möglich, das CSSOM mit JavaScript zu manipulieren, weil es so ist Technisch gesehen eine JS-API. Aber im Vergleich dazu nützt es nicht viel JavaScript-DOM-Manipulation.
Der wichtigste Grund, sich über CSSOM zu informieren, besteht darin, besser darüber zu erfahren, wie Websites wirklich funktionieren.
Es gibt viele Dinge, die wir für selbstverständlich halten, damit das Internet reibungslos funktioniert. Wenn Sie den gesamten Prozess etwas besser verstehen, können Sie sich vorstellen, wie alles abläuft, und hoffentlich ein wenig Verständnis für die Existenz des World Wide Web entwickeln.
Andere Lesungen
Ich hoffe, diese Einführung kann Ihnen eine solide Vorstellung davon vermitteln, was das CSS-Objektmodell ist und wie es sich auf Webseiten auswirkt. Dort Im CSSOM gibt es nicht viel zu manipulieren.es unterscheidet sich also ein wenig vom DOM.
Allerdings handelt es sich immer noch um eine entscheidende Technologie in der Webentwicklung und sollte wichtige Aspekte des Browser-Renderings klären.
Es gibt viele andere Ressourcen, die sich mit CSSOM und seiner Funktionsweise befassen. Wenn Sie mehr erfahren möchten, empfehle ich Ihnen folgende Beiträge:
