Průvodce začátečníky k CSS objektovému modelu (CSSOM)
Hodně se děje mezi první požadavek HTTP a Závěrečná dodávka webové stránky. Přenos dat a renderovací potrubí prohlížeče vyžadují mnoho různých technologií, jedním z nich je CSS objektový model, nebo CSSOM.
CSS Object Model bere CSS kód a vykresluje každý selektor do stromové struktury pro snadnější analýzu. Možná není důležité, aby vývojáři plně pochopili tento koncept, ale je to hodnotné téma ke studiu, pokud se chcete dozvědět více jak prohlížeče vykreslují kód na pracovní web.
V tomto příspěvku budu pokrýt základy CSS Object Modelu a ukážu vám, jak to funguje.
Co je to CSSOM?
Pojem CSS Object Model popisuje a mapa všech CSS selektorů a příslušných vlastností pro každý selektor. Tyto styly mohou být kořenové elementy nebo mají vnořené děti.
CSSOM je velmi podobný DOM v HTML, což je zkratka pro Document Object Model. Oba jsou součástí kritická cesta vykreslování což je řada kroků, ke kterým musí dojít řádně vykreslit webové stránky. Všechny tyto procesy probíhají automaticky, v zákulisí.
Proč je tedy důležitý CSSOM? Je to mapa používaná prohlížečem správně vykreslit styly CSS na webové stránce. Neexistuje snadný způsob, jak říct počítači, že všechny odstavce v .hlavní obsah div musí mít extra výšku řádku.
Řešením je CSS Object Model, který mapuje všechny prvky a vlastnosti z vašeho CSS kódu.
CSSOM usnadňuje prohlížeč vykreslení stylů na stránce. Celá věc je velmi technická, ale stojí za to pochopit trochu o procesu, zejména pokud si postavit webové stránky.
Jak to funguje
DOM i CSSOM jsou používá široce všechny webové prohlížeče interpretovat a vykreslovat webové stránky. Níže uvedený diagram je uveden v příručce Google Developers Web Fundamentals a vysvětluje, jak DOM je vykreslen ve webovém prohlížeči.
V DOM & CSSOM jsou všechny informace převedeny z bajtů na digitální mapy které vykreslí každý prvek ve webovém dokumentu. Proces funguje následovně:
- Prohlížeč stáhne HTML pro webovou stránku.
- Při zpracování HTML může syntaktický analyzátor narazit do elementu odkazu odkazování na externí šablonu stylů.
- Tento CSS styl je tedy do mapy pomocí specifikace CSS Object Model.
- Výsledný kód pak může být na prvky v DOM.
To vše se děje velmi rychle a dochází s každým požadavkem na jednu stránku. Tento další diagram ukazuje a vzorovou strukturu CSSOM.
Všimněte si, že některé vlastnosti diagramu mají světlejší barvy šedého písma. Tyto vlastnosti jsou zděděné od rodiče. Vzhledem k tomu, že tělo má specifickou velikost písma, všechny prvky v těle také dostanou tuto velikost písma, pokud není přepsána.
HTML a CSS řetězce jsou převedeny na tokeny které pak mohou být chápány jako uzly prohlížečem. Tyto uzly jsou jako objekty ve stromové struktuře , která definuje, jak má být celá stránka vytvořena.
CSSOM a DOM jsou zcela samostatné datové modely, proto jsou odděleně. Ale oba mají podobné struktury stromů, a oba slouží stejnému účelu: dát prohlížeči strukturu, aby vykreslila a identifikovala různé prvky na stránce.
Proč by měli weboví vývojáři pečovat
Vzhledem k tomu, že všechny vykreslování se stane na backendu, opravdu se nemusíte starat o strom CSSOM. Ale může být užitečné pochopit, jak to funguje.
Jedna věc k zapamatování je, že CSSOM musí být plně načten před zobrazením webové stránky, protože bude definovat, jak by měl vypadat každý prvek na stránce. Pokud by se stránka načítala před CSSOM, měla by se nejprve zobrazit jako prostý kód HTML, za nímž následují styly o několik sekund později.
Prohlížeče se tomu výslovně vyhýbají, protože by to bylo pro koncové uživatele matoucí. A stojí za zmínku, že CSSOM nelze uložit do mezipaměti; to musí být na každé stránce.
Skutečné soubory CSS mohou být ukládány do mezipaměti, aby bylo možné rychleji načíst aktiva, ale vykreslit stránku v prohlížeči vždy vyžaduje spuštění analyzátoru CSSOM. To také znamená, že JavaScript může mít negativní vliv na vykreslování a výkon.
Vřele doporučuji přečíst tento článek, abyste se dozvěděli více o externích zdrojích CSS / JS a jejich časech načítání.
Nejlepší způsob, jak optimalizovat vaše stránky je crafting a přírodní kaskáda zdrojů jsou načteny v tandemu.
Je možné manipulovat s CSSOM pomocí JavaScriptu, protože je to technicky JS API. Ale to neslouží mnoho z účelu ve srovnání s JavaScript manipulace.
Větší důvod se dozvědět o CSSOM je dále vzdělávat sebe, jak webové stránky skutečně fungují.
Existuje spousta věcí, které považujeme za samozřejmost a které udržují hladký průběh internetu. Když pochopíte trochu víc o celém procesu, můžete si představit, jak se celá věc schází, a doufejme, že získáte nějaké uznání za existenci World Wide Webu..
Další čtení
Doufám, že vám toto úvodní slovo poskytne solidní představu o tom, co je to CSS Object Model a jak ovlivňuje webové stránky. Tam manipulace v CSSOM, tak se trochu liší od DOM.
Je to však stále důležitá technologie ve vývoji webu a měla by objasnit hlavní aspekty vykreslování prohlížeče.
O CSSOMu ao tom, jak funguje, existuje mnoho dalších zdrojů. Pokud se chcete dozvědět více, zde jsou některé příspěvky, které doporučuji:
- Přehled modelu CSS objektů
- Prozkoumání CSSOM: Vytvoření CSS objektového analyzátoru
- Co by měl každý vývojář rozhraní Frontend vědět o vykreslování webových stránek
