{"id":880784,"date":"2023-10-21T18:48:54","date_gmt":"2023-10-21T23:48:54","guid":{"rendered":"https:\/\/blogging-techies.com\/ge\/der-einsteigerleitfaden-zum-css-objektmodell-cssom\/"},"modified":"2023-10-21T18:48:54","modified_gmt":"2023-10-21T23:48:54","slug":"der-einsteigerleitfaden-zum-css-objektmodell-cssom","status":"publish","type":"post","link":"https:\/\/blogging-techies.com\/ge\/der-einsteigerleitfaden-zum-css-objektmodell-cssom\/","title":{"rendered":"Der Einsteigerleitfaden zum CSS-Objektmodell (CSSOM)"},"content":{"rendered":"

Dazwischen passieren viele Dinge erste HTTP-Anfrage<\/strong> und das letzte Lieferung<\/strong> einer Webseite. Der Daten\u00fcbertragungs- und Rendering-Prozess des Browsers erfordert viele verschiedene Technologien, eine davon ist CSS-Objektmodell<\/a><\/strong>oder der CSSOM<\/strong>.<\/p>\n

Das CSS-Objektmodell \u00fcbernimmt den CSS-Code und repr\u00e4sentiert jeden Selektor in einer Baumstruktur<\/strong> um die Analyse zu erleichtern. F\u00fcr Entwickler ist es vielleicht nicht entscheidend, dieses Konzept vollst\u00e4ndig zu verstehen, aber es ist ein wertvolles Thema, das Sie studieren sollten, wenn Sie mehr dar\u00fcber erfahren m\u00f6chten. wie Browser Code in eine funktionsf\u00e4hige Website umwandeln<\/strong>.<\/p>\n

In diesem Beitrag behandle ich die Grundlagen des CSS-Objektmodells und zeige Ihnen, wie es funktioniert.<\/p>\n

Was ist CSSOM?<\/h5>\n

Der Begriff CSS-Objektmodell beschreibt a Ordnen Sie alle CSS-Selektoren und relevanten Eigenschaften f\u00fcr jeden Selektor zu<\/strong>. Diese Stile k\u00f6nnen Stammelemente sein oder verschachtelte untergeordnete Elemente haben.<\/p>\n

CSSOM ist sehr \u00e4hnlich DOM in HTML<\/strong>, was f\u00fcr Document Object Model steht. Beide sind Teil der Kritischer Renderpfad<\/a><\/strong> Das ist eine Reihe von Schritten, die passieren m\u00fcssen Eine Website richtig rendern<\/strong>. Alle diese Prozesse passieren automatisch<\/strong>hinter den Kulissen.<\/p>\n

Warum ist CSSOM wichtig? Es ist die Karte, die der Navigator verwendet CSS-Stile korrekt rendern<\/strong> Auf einer Website. Es gibt keine einfache M\u00f6glichkeit, einem Computer mitzuteilen, dass alle Abs\u00e4tze in einem .main-content-Div eine zus\u00e4tzliche Zeilenh\u00f6he haben sollen.<\/p>\n

Die L\u00f6sung ist das CSS-Objektmodell bildet alle Elemente und Eigenschaften ab<\/strong> Ihres CSS-Codes.<\/p>\n

CSSOM erleichtert dem Browser die Arbeit Rendern Sie Stile auf der Seite<\/strong>. Es ist alles sehr technisch, aber es lohnt sich, den Prozess ein wenig zu verstehen, insbesondere wenn Sie Websites erstellen.<\/p>\n

Wie funktioniert es<\/h5>\n

Sowohl das DOM als auch das CSSOM sind Wird h\u00e4ufig von allen Webbrowsern verwendet<\/strong> zum Interpretieren und Rendern von Webseiten. Das folgende Diagramm ist Google-Entwicklerhandbuch zu Web-Grundlagen<\/a>und erkl\u00e4ren wie DOM wird in einem Webbrowser gerendert<\/strong>.<\/p>\n

<\/figure>\n

Sowohl im DOM als auch im CSSOM sind alle Informationen vorhanden von Bytes in digitale Karten umgewandelt<\/strong> die jedes Element eines Webdokuments darstellen. Der Prozess funktioniert wie folgt:<\/p>\n

    \n
  1. Der Navigator Laden Sie den HTML-Code herunter<\/strong> f\u00fcr eine Webseite.<\/li>\n
  2. W\u00e4hrend der HTML-Verarbeitung st\u00f6\u00dft der Parser m\u00f6glicherweise auf ein Link-Element Verweisen auf ein externes Stylesheet<\/strong>.<\/li>\n
  3. Dieses CSS-Stylesheet ist dann auf einer Karte analysiert<\/strong> Verwendung der Spezifikationen des CSS-Objektmodells<\/a>.<\/li>\n
  4. Der resultierende Code kann dann sein auf Elemente im DOM angewendet<\/strong>.<\/li>\n<\/ol>\n

    All dies geschieht sehr schnell und geschieht bei jeder Seitenanfrage<\/strong>. Dieses andere Diagramm unten zeigt a Beispiel f\u00fcr eine CSSOM-Baumstruktur<\/strong>.<\/p>\n

    <\/figure>\n

    Beachten Sie, dass einige Eigenschaften im Diagramm hellere graue Schriftfarben haben. Diese Eigenschaften sind vererbt<\/a> des Vaters<\/strong>. Da der Textk\u00f6rper eine bestimmte Schriftgr\u00f6\u00dfe hat, erhalten auch alle Elemente innerhalb des Textk\u00f6rpers diese Schriftgr\u00f6\u00dfe, sofern sie nicht \u00fcberschrieben werden.<\/p>\n

    HTML- und CSS-Strings sind in Token umgewandelt<\/strong> was dann sein kann als Knoten verstanden<\/strong> durch den Browser. Diese Knoten sind wie Objekte innerhalb der Baumstruktur<\/strong> Dies definiert, wie die gesamte Seite aufgebaut sein soll.<\/p>\n

    Das CSSOM und das DOM sind vollst\u00e4ndig separate Datenmodelle<\/strong>deshalb sind sie es getrennt voneinander analysiert<\/strong>. Aber das haben sie beide \u00e4hnliche Baumstrukturen<\/strong>und beide haben den gleichen Zweck: dem Browser eine Struktur zu geben, um verschiedene Elemente auf der Seite darzustellen und zu identifizieren.<\/p>\n

    Warum sich Webentwickler darum k\u00fcmmern sollten<\/h5>\n

    Da alles Rendern passiert im Backend<\/strong>, m\u00fcssen Sie sich nicht wirklich viele Gedanken \u00fcber den CSSOM-Baum machen. Aber es kann hilfreich sein zu verstehen, wie es funktioniert.<\/p>\n

    Eine Sache, an die man sich erinnern sollte, ist, dass die CSSOM muss vollst\u00e4ndig geladen sein<\/strong> 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\u00e4ter.<\/p>\n

    Browser vermeiden dies ausdr\u00fccklich, da es f\u00fcr Endbenutzer verwirrend w\u00e4re. Und es ist erw\u00e4hnenswert, dass das CSSOM kann nicht zwischengespeichert werden<\/strong>; muss sein auf jeder Seite neu erstellt<\/strong>.<\/p>\n

    Tats\u00e4chliche CSS-Dateien k\u00f6nnen zwischengespeichert werden, um Ressourcen schneller zu laden, aber eine Seite im Browser darzustellen. erfordert immer die Ausf\u00fchrung des CSSOM-Parsers<\/strong>. Dies bedeutet auch, dass JavaScript das Rendering und die Leistung negativ beeinflussen kann.<\/p>\n

    Ich w\u00fcrde es w\u00e4rmstens empfehlen diesen Artikel lesen<\/a> Weitere Informationen zu externen CSS\/JS-Ressourcen und deren Ladezeiten finden Sie hier.<\/p>\n

    Der beste Weg, Ihre Website zu optimieren, besteht darin, eine zu erstellen nat\u00fcrlicher Wasserfall<\/strong> von Ressourcen, die werden gleichzeitig aufgeladen<\/strong>.<\/p>\n

    Es ist m\u00f6glich, das CSSOM mit JavaScript zu manipulieren, weil es so ist Technisch gesehen eine JS-API<\/a>. Aber im Vergleich dazu n\u00fctzt es nicht viel JavaScript-DOM-Manipulation<\/a>.<\/p>\n

    Der wichtigste Grund, sich \u00fcber CSSOM zu informieren, besteht darin, besser dar\u00fcber zu erfahren, wie Websites wirklich funktionieren.<\/p>\n

    Es gibt viele Dinge, die wir f\u00fcr selbstverst\u00e4ndlich halten, damit das Internet reibungslos funktioniert. Wenn Sie den gesamten Prozess etwas besser verstehen, k\u00f6nnen Sie sich vorstellen, wie alles abl\u00e4uft, und hoffentlich ein wenig Verst\u00e4ndnis f\u00fcr die Existenz des World Wide Web entwickeln.<\/p>\n

    Andere Lesungen<\/h5>\n

    Ich hoffe, diese Einf\u00fchrung 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.<\/strong>es unterscheidet sich also ein wenig vom DOM.<\/p>\n

    Allerdings handelt es sich immer noch um eine entscheidende Technologie in der Webentwicklung und sollte wichtige Aspekte des Browser-Renderings kl\u00e4ren.<\/p>\n

    Es gibt viele andere Ressourcen, die sich mit CSSOM und seiner Funktionsweise befassen. Wenn Sie mehr erfahren m\u00f6chten, empfehle ich Ihnen folgende Beitr\u00e4ge:<\/p>\n ","protected":false},"excerpt":{"rendered":"

    Dazwischen passieren viele Dinge erste HTTP-Anfrage und das letzte Lieferung einer Webseite. Der Daten\u00fcbertragungs- und Rendering-Prozess des Browsers erfordert viele verschiedene Technologien, eine davon ist CSS-Objektmodelloder der CSSOM. Das CSS-Objektmodell \u00fcbernimmt den CSS-Code und repr\u00e4sentiert jeden Selektor in einer Baumstruktur um die Analyse zu erleichtern. F\u00fcr Entwickler ist es vielleicht nicht entscheidend, dieses Konzept vollst\u00e4ndig […]<\/p>\n","protected":false},"author":1,"featured_media":880785,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","fifu_image_url":"https:\/\/blogging-techies.com\/wp-content\/uploads\/2023\/06\/3.webp","fifu_image_alt":""},"categories":[7],"tags":[],"_links":{"self":[{"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/posts\/880784"}],"collection":[{"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/comments?post=880784"}],"version-history":[{"count":0,"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/posts\/880784\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/media\/880785"}],"wp:attachment":[{"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/media?parent=880784"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/categories?post=880784"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/tags?post=880784"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}