Priročnik za začetnike za objektni model CSS (CSSOM)

Veliko se zgodi med prva zahteva HTTP in končno dostavo spletne strani. Prenos podatkov in cevovodi za upodabljanje brskalnika zahtevata veliko različnih tehnologij, od katerih je ena Objektni model CSS, ali CSSOM.

Objektni model CSS sprejme kodo CSS in prikaže vsak izbirnik v drevesno strukturo za lažje razčlenjevanje. Morda ni bistvenega pomena za razvijalce, da bi popolnoma razumeli ta koncept, toda to je dragocena tema za študij, če želite izvedeti več o tem kako brskalniki prikazujejo kodo na delujoči spletni strani.

V tej objavi bom pokril osnove CSS Object Model in vam pokazal, kako deluje.

Kaj je CSSOM?

Izraz CSS Object Model opisuje a zemljevid vseh selektorjev CSS in ustrezne lastnosti za vsak izbirnik. Ti slogi so lahko korenski elementi ali imajo ugnezdene otroke.

CSSOM je zelo podoben DOM v HTML-ju, , ki pomeni Object Document Model. Oba sta del skupine kritična pot upodabljanja kar je vrsta korakov, ki se morajo zgoditi pravilno prikazati spletno mesto. Vsi ti procesi se dogajajo samodejno, v zakulisju.

Zakaj je torej CSSOM pomemben? To je zemljevid, ki ga uporablja brskalnik pravilno upodobi sloge CSS na spletni strani. Računalnik ne more prepoznati, da so vsi odstavki v .glavna vsebina div mora imeti dodatno višino vrstice.

Rešitev je CSS Object Model, ki prikazuje vse elemente in lastnosti iz vaše kode CSS.

CSSOM olajša brskalniku upodobi sloge na strani. Celotna stvar je zelo tehnična, vendar je vredno razumeti malo o procesu, še posebej, če gradite spletne strani.

Kako deluje

Tako DOM kot CSSOM sta uporabljajo vsi spletni brskalniki za tolmačenje in upodabljanje spletnih strani. Spodnji diagram je iz priročnika Google Fundamentals za spletne razvijalce in pojasnjuje, kako DOM je upodobljen v spletnem brskalniku.

V DOM in CSSOM so vse informacije pretvorijo iz bajtov v digitalne zemljevide ki vsebujejo vse elemente v spletnem dokumentu. Postopek deluje na naslednji način:

1. Brskalnik prenese HTML za spletno stran.
2. Med obdelavo HTML-ja lahko razčlenjevalnik naleti na element povezave navajanje zunanjega sloga.
3. Ta slogovna različica CSS je nato razčlenjeno na zemljevid z uporabo specifikacij CSS Object Model.
4. Tako dobljena koda je lahko uporablja za elemente v DOM.

Vse to se zgodi zelo hitro in se zgodi z vsako posamezno zahtevo za stran. Ta drugi diagram spodaj prikazuje primer drevesne strukture CSSOM.

Opazite, kako imajo nekatere lastnosti v diagramu svetlejše sive barve pisav. Te lastnosti so podedovali od staršev. Ker ima telo določeno velikost pisave, vsi elementi v telesu dobijo tudi to velikost pisave, razen če je preglasena.

Nizi HTML in CSS so pretvori v žetone kar je potem lahko razumeti kot vozlišča brskalnika. Ta vozlišča so podobna objekti znotraj drevesne strukture ki določa, kako naj bo zgrajena celotna stran.

CSSOM in DOM sta popolnoma ločenih podatkovnih modelov, zato so med seboj ločeno. Ampak oba sta podobne drevesne strukture, in oba služita istemu namenu: dajo brskalniku strukturo za upodabljanje in prepoznavanje različnih elementov na strani.

Zakaj bi spletni razvijalci skrbeli

Od vsega upodabljanja se zgodi na hrbtni strani, res ne potrebujete veliko skrbeti za drevo CSSOM. Vendar je lahko koristno razumeti, kako deluje.

Ne pozabite, da je CSSOM mora biti v celoti naložen preden se prikaže spletna stran, saj bo določila, kako naj izgleda vsak element na strani. Če se stran, naložena pred CSSOM, najprej prikaže kot navaden HTML, nato pa nekaj sekund pozneje sledijo slogovni.

Brskalniki se izrecno izogibajo temu, ker bi to povzročilo zmedo končnim uporabnikom. In vredno je omeniti, da je CSSOM ni mogoče predpomniti; mora biti na vsaki strani.

Dejanske datoteke CSS lahko shranite v predpomnilnik, da se sredstva hitreje naložijo, vendar se stran prikaže v brskalniku vedno zahteva zagon razčlenjevalnika CSSOM. To tudi pomeni, da lahko JavaScript negativno vpliva na upodabljanje in uspešnost.

Zelo priporočam, da preberete ta članek, če želite izvedeti več o zunanjih CSS / JS virih in časih njihovega nalaganja.

Najboljši način za optimizacijo vašega spletnega mesta je ustvarjanje a naravna kaskada sredstev so naloženi v tandemu.

CSSOM je mogoče manipulirati z uporabo JavaScripta, ker je tehnično JS API. Vendar pa ne služi veliko namenu v primerjavi z JavaScript manipulacijo.

Večji razlog za spoznavanje CSSOM je nadaljnje izobraževanje o tem, kako spletne strani dejansko delujejo.

Obstaja veliko stvari, ki jih jemljemo za samoumevne, da je internet tekoč. Ko razumete malo več o celotnem procesu, si lahko predstavljate, kako se vse skupaj združuje, in upamo, da boste dobili nekaj spoštovanja do obstoja svetovnega spleta.

Nadaljnje branje

Upam, da vam ta uvod lahko poda trdno predstavo o tem, kaj je CSS Object Model, in kako vpliva na spletne strani. Tukaj v CSSOM ni veliko za manipuliranje, zato se nekoliko razlikuje od DOM-a.

Kljub temu pa je še vedno kritična tehnologija v razvoju spletnih strani, zato bi morala pojasniti glavne vidike upodabljanja brskalnika.

Obstaja veliko drugih virov, ki razpravljajo o CSSOM in kako deluje. Če želite izvedeti več, tukaj je nekaj objav, ki jih priporočam:

• CSS Object Model Overview
• Raziskovanje CSSOM: izdelava analizatorja objektov CSS
• Kaj mora vsak Frontend razvijalec vedeti o prikazovanju spletnih strani