Vodič za početnike za CSSOM objektni model (CSSOM)

Mnogo se dogodi između prvi HTTP zahtjev i finalna dostava web-stranice. Prijenos podataka i cjevovod za prikazivanje preglednika zahtijevaju mnogo različitih tehnologija, od kojih je jedna CSS objektni model, ili CSSOM.

CSS Object Model uzima CSS kod i prikazuje svaki selektor u strukturu stabla za lakše parsiranje. Možda nije bitno da programeri u potpunosti razumiju ovaj koncept, ali to je vrijedna tema za proučavanje ako želite saznati više o tome kako preglednici prikazuju kod u radnoj web-lokaciji.

U ovom postu pokrit ću osnove CSS-ovog objektnog modela i pokazati vam kako radi.

Što je CSSOM?

Pojam CSS Object Model opisuje a mapa svih CSS selektora i relevantnih svojstava za svaki birač. Ovi stilovi mogu biti korijenski elementi ili ugniježđena djeca.

CSSOM je vrlo sličan DOM u HTML-u, što je skraćenica za Document Object Model. Obje su dio kritična putanja prikazivanja što je niz koraka kojima se mora dogoditi ispravno prikazati web-lokaciju. Svi ti procesi se događaju automatsko, iza scene.

Zašto je CSSOM važan? To je karta koju koristi preglednik ispravno prikazati CSS stilove na web stranici. Ne postoji jednostavan način da računalo kažete da su svi stavci u a .glavni sadržaj div mora imati dodatnu visinu linije.

Rješenje je CSS Object Model koji mapira sve elemente i svojstva iz CSS koda.

CSSOM olakšava pregledniku prikazati stilove na stranici. Cijela stvar je vrlo tehnički, ali vrijedi malo razumjeti proces, pogotovo ako gradite web stranice.

Kako radi

DOM i CSSOM su sve web preglednike za tumačenje i prikazivanje web stranica. Dijagram u nastavku je iz vodiča za Google Web Fundamentals i objašnjava kako DOM se prikazuje u web-pregledniku.

I u DOM & CSSOM, sve informacije su pretvoriti iz bajtova u digitalne karte koji prikazuju svaki element u web dokumentu. Proces radi na sljedeći način:

1. Preglednik preuzima HTML za web stranicu.
2. Prilikom obrade HTML-a, parser može naletjeti na element veze referenciranje vanjske tablice stilova.
3. Tada je ova CSS stilova raščlaniti na kartu pomoću specifikacija CSS objekta.
4. Rezultirajući kod može biti primjenjuje se na elemente u domeni DOM.

Sve se to događa vrlo brzo i događa se sa svakim zahtjevom stranice. Ovaj drugi dijagram ispod prikazuje struktura stabla CSSOM-a.

Primijetite kako neka svojstva u dijagramu imaju svjetlije sive boje fontova. Ta svojstva su naslijedio od roditelja. Budući da tijelo ima određenu veličinu fonta, svi elementi u tijelu također dobivaju tu veličinu fonta, osim ako se ne izmijeni.

HTML i CSS nizovi su pretvorena u tokene što onda može biti podrazumijevaju se čvorovi preglednika. Ovi čvorovi su slični objekti unutar strukture stabla koji definira način na koji bi se trebala konstruirati cijela stranica.

CSSOM i DOM su u potpunosti zasebne podatkovne modele, stoga su oni međusobno odvojeno. Ali oboje imaju slične strukture drveća, i obje služe istoj svrsi: daju pregledniku strukturu za prikazivanje i identificiranje različitih elemenata na stranici.

Zašto web programeri bi trebali brinuti

Budući da je sve prikazano događa se na pozadini, stvarno ne morate puno brinuti o CSSOM stablu. Ali može biti korisno razumjeti kako to funkcionira.

Jedna stvar koju treba zapamtiti je da CSSOM mora biti u potpunosti učitan prije nego što se web stranica prikaže, jer će definirati kako bi trebao izgledati svaki element na stranici. Ako se stranica učitana prije CSSOM-a najprije pojavi kao običan HTML, nakon čega slijede stilovi nekoliko sekundi kasnije.

To preglednici posebno izbjegavaju jer bi to bilo zbunjujuće za krajnje korisnike. I vrijedi napomenuti da je CSSOM ne može se predmemorirati; mora biti ponovno na svakoj stranici.

Stvarne CSS datoteke mogu se pohraniti u predmemoriju kako bi se sredstva brže učitala, ali prikazivanje stranice u pregledniku uvijek zahtijeva pokretanje CSSOM parsera. To također znači da JavaScript može negativno utjecati na prikaz i izvedbu.

Ja bih visoko preporučiti čitanje ovaj članak kako bi saznali više o vanjskim CSS / JS resursa i njihova učitavanja puta.

Najbolji način da optimizirate svoju web-lokaciju je izrada a prirodna kaskada sredstava učitane su u tandemu.

Moguće je manipulirati CSSOM-om pomoću JavaScripta jer je tehnički JS API. Ali to ne služi mnogo u odnosu na JavaScript manipulaciju.

Veći razlog za učenje o CSSOM-u je da se dodatno educirate o tome kako web-mjesta funkcioniraju.

Postoji mnogo stvari koje uzimamo zdravo za gotovo da internet funkcionira glatko. Kada malo bolje shvatite cijeli proces, možete zamisliti kako se cijela stvar zbližava i nadamo se da ćete steći određenu zahvalnost za postojanje World Wide Weba.

Daljnje čitanje

Nadam se da vam ovaj uvod može pružiti solidnu ideju o tome što je CSS objektni model i kako to utječe na web stranice. Tamo u CSSOM-u nema mnogo manipulacija, tako da se malo razlikuje od DOM-a.

Međutim, to je još uvijek kritična tehnologija u razvoju weba i trebala bi razjasniti glavne aspekte prikazivanja preglednika.

Postoji mnogo drugih resursa koji raspravljaju o CSSOM-u i načinu na koji on funkcionira. Ako želite saznati više, evo nekoliko postova koje preporučujem:

• CSS Object Model Overview
• Istraživanje CSSOM-a: Izrada CSS analizatora objekata
• Što bi svaki Frontend Developer trebao znati o web-prikazivanju