Príručka pre začiatočníkov pre CSS Object Model (CSSOM)

Veľa sa stáva medzi prvý žiadosť HTTP a konečná dodávka webovej stránky. Prenos údajov a vykresľovacie potrubie prehliadača vyžadujú množstvo rôznych technológií, z ktorých jeden je Objektový model CSS, alebo CSSOM.

Objektový model CSS preberá kód CSS a vykresľuje každý výber do stromovej štruktúry pre ľahšiu analýzu. Možno nie je pre developerov rozhodujúce pochopiť tento koncept, ale je to cenná téma na štúdium, ak sa chcete dozvedieť viac o ako prehliadače robia kód na pracovnú webovú stránku.

V tomto príspevku sa chystám zakryť základy CSS Object Model a ukázať vám, ako to funguje.

Čo je CSSOM?

Pojem CSS Object Model popisuje a mapa všetkých selektorov CSS a relevantné vlastnosti pre každého voliča. Tieto štýly môžu byť koreňovými prvkami alebo majú vnorené deti.

CSSOM je veľmi podobný DOM v HTML, čo znamená dokumentový objektový model. Obaja sú súčasťou kritická renderovacia cesta čo je séria krokov, ktoré sa musia stať správne poskytovať webové stránky. Všetky tieto procesy sa dejú automaticky, v zákulisí.

Tak prečo je CSSOM dôležitá? Je to mapa, ktorú používa prehliadač správne vykresľovať štýly CSS na webovej stránke. Nie je jednoduchý spôsob, ako počítačovi povedať, že všetky odseky v a .hlavný obsah div musí mať ďalšiu výšku čiar.

Riešením je objektový model CSS, ktorý mapuje všetky prvky a vlastnosti z vášho kódu CSS.

CSSOM uľahčuje prehliadač renderovať štýly na stránke. Celá vec je veľmi technická, ale stojí za to pochopiť trochu o procese, a to najmä v prípade, že vytvoríte webové stránky.

Ako to funguje

DOM i CSSOM sú široko používaný všetkými webovými prehliadačmi interpretovať a vykresľovať webové stránky. Nižšie uvedený diagram sa nachádza v príručke Základy webových služieb pre vývojárov Google a vysvetľuje, ako DOM sa vykresľuje vo webovom prehliadači.

V DOM & CSSOM sú všetky informácie konvertované z bajtov na digitálne mapy ktoré robia každý prvok v webovom dokumente. Tento proces funguje takto:

1. Prehliadač stiahne HTML pre webovú stránku.
2. Pri spracúvaní kódu HTML môže analyzátor naraziť na prvok odkazu odkazovanie na externý štýl.
3. Tento štýl šablóny CSS je potom analyzované do mapy pomocou špecifikácií objektu CSS.
4. Výsledný kód môže byť potom aplikované na prvky v DOM.

To všetko sa stane veľmi rýchlo a nastane s každou požiadavkou na jednu stránku. Tento ďalší obrázok zobrazuje nasledujúci obrázok napríklad stromová štruktúra CSSOM.

Všimnite si, ako niektoré vlastnosti v diagrame majú svetlejšie šedé farby písma. Tieto vlastnosti sú z dedičstva. Vzhľadom na to, že telo má špecifickú veľkosť písma, všetky prvky v tele získajú aj takú veľkosť písma, pokiaľ nie je prepísané.

Súbory HTML a CSS sú premenené na žetóny čo potom môže byť chápané ako uzly prehliadačom. Tieto uzly sú podobné objekty v štruktúre stromu ktorá definuje, ako by mala byť celá stránka vytvorená.

CSSOM a DOM sú úplne oddelené dátové modely, preto sú analyzované oddelene od seba. Ale obaja majú podobné stromové štruktúry, a oba slúžia rovnakému účelu: poskytnutie prehliadača štruktúru na vykresľovanie a identifikáciu rôznych prvkov na stránke.

Prečo by sa weboví vývojári mali starať

Pretože všetky vykresľovanie sa stane na backend, naozaj sa nemusíte veľmi obávať stromu CSSOM. Ale môže byť užitočné pochopiť, ako to funguje.

Jedna vec, ktorú si treba pamätať, je, že CSSM musí byť plne nabitá pred zobrazením webovej stránky, pretože bude definovať, ako by mal vyzerať každý prvok na stránke. Ak stránka načítaná pred CSSOM, najprv sa objaví ako obyčajný HTML, nasledujú štýly niekoľko sekúnd neskôr.

Prehliadače sa tomu konkrétne vyhnú, pretože by to bolo pre koncových používateľov nejasné. A stojí za zmienku, že CSSOM nemožno uložiť do vyrovnávacej pamäte; musí to byť na každej stránke.

Aktuálne súbory CSS môžu byť uložené do vyrovnávacej pamäte, aby sa mohli rýchlejšie načítať, ale vykresliť stránku v prehliadači vždy vyžaduje spustenie syntaktického analyzátora CSSOM. To tiež znamená, že JavaScript môže mať negatívny vplyv na vykresľovanie a výkonnosť.

Veľmi by som vám odporučil čítať tento článok, aby som sa dozvedel viac o externých zdrojoch CSS / JS ao ich zaťažení.

Najlepší spôsob, ako optimalizovať svoje stránky, je vytvorenie a prírodná kaskáda zdrojov, ktoré sú načítané v tandeme.

CSSOM je možné manipulovať pomocou jazyka JavaScript, pretože je technicky JS API. Ale v porovnaní s manipuláciou DOMu JavaScript nespĺňa veľa účelov.

Hlavným dôvodom na to, aby ste sa dozvedeli viac o CSSOM, je ďalšie vzdelávanie o tom, ako stránky skutočne fungujú.

Existuje veľa vecí, ktoré považujeme za samozrejmosť, ktoré udržujú hladký chod na Internete. Keď pochopíte trochu viac o celom procese, môžete si predstaviť, ako celá vec prichádza spolu a dúfajme získať nejaké ocenenie za existenciu World Wide Web.

Ďalšie čítanie

Dúfam, že tento intro vám dá pevnú predstavu o tom, čo je CSS Object Model a ako to ovplyvňuje webové stránky. tam nie je veľa manipulovať v CSSOM, takže sa od DOM trochu líši.

Je to však stále kritická technológia vývoja webových aplikácií a mala by objasniť dôležité aspekty vykresľovania prehliadača.

Existuje veľa ďalších zdrojov, ktoré diskutujú o CSSOM a ako to funguje. Ak sa chcete dozvedieť viac, tu sú niektoré príspevky, ktoré odporúčam:

• Prehľad objektov modelu CSS
• Vyšetrovanie CSSOM: Vytvorenie CSS Object Analyzer
• Čo by každý vývojár Frontend mal vedieť o rendrovaní webových stránok