CSS-objektimudeli (CSSOM) algajate juhend
Palju juhtub esimene HTTP-päring ja lõplik tarne veebilehe. Andmeedastus ja brauseri renderdamine vajavad paljusid erinevaid tehnoloogiaid, millest üks on CSS objekti mudel, või CSSOM.
CSS-objektimudel võtab CSS-koodi ja muudab iga valija puu struktuuri lihtsamaks parsimiseks. Võib-olla ei ole arendajatele oluline see mõiste täielikult mõista, kuid see on väärtuslik teema, kui soovite rohkem teada saada kuidas brauserid tööleheküljeks muuta.
Selles postituses katan CSS Object Model põhitõed ja näitan teile, kuidas see toimib.
Mis on CSSOM?
Termin CSS Object Model kirjeldab a kõigi CSS-i valikute ja asjakohaste omaduste kaart iga valija jaoks. Need stiilid võivad olla root elemendid või lapsed.
CSSOM on väga sarnane DOM HTML-is, mis tähistab dokumendi objekti mudelit. Mõlemad neist on osa kriitiline renderdamise tee mis on sammude samm, mis peab juhtuma korrektselt muuta veebisait. Kõik need protsessid toimuvad automaatselt, kaamerate taga.
Miks on CSSOM oluline? See on brauseri poolt kasutatav kaart korrektselt muuta CSS-stiilid veebisaidil. Arvutile pole lihtne öelda, et kõik punktid a .põhisisu divil peab olema lisarea kõrgus.
Lahendus on CSS objekti mudel, mis kaardistab kõik elemendid ja omadused oma CSS-koodist.
CSSOM muudab brauseri lihtsamaks muuta stiilid lehel. Kogu asi on väga tehniline, kuid selle protsessi kohta on mõtet mõnevõrra mõista, eriti kui loote veebilehti.
Kuidas see töötab
Nii DOM kui ka CSSOM on kasutavad kõik veebibrauserid veebilehtede tõlgendamiseks ja esitamiseks. Allolev diagramm on Google'i arendajate veebi põhialuste juhendist ja selgitab, kuidas DOM esitatakse veebibrauseris.
Nii DOM & CSSOMis on kogu teave teisendatakse baitidest digitaalseteks kaartideks mis muudavad iga veebi dokumendi elemendi. Protsess toimib järgmiselt:
- Brauser HTML-i allalaadimine veebilehe jaoks.
- HTML-i töötlemisel võib parser lüüa linkielementi välise stiilile viitamine.
- See CSS-laaditabel on siis kaardistatakse CSS Object Model spetsifikatsioonide kasutamine.
- Saadud kood võib siis olla DOMi elementidele.
Kõik see juhtub väga kiiresti ja toimub iga üksiku lehe sooviga. See teine diagramm näitab alljärgnevat näiteks CSSOMi puustruktuur.
Pange tähele, et mõnedel diagrammi omadustel on heledamad hallid värvid. Need omadused on vanematelt päritud. Kuna kehal on konkreetne kirjasuurus, saavad kõik kehas olevad elemendid selle fondi suuruse, kui see ei ole möödas.
HTML ja CSS stringid on konverteeritakse märgideks mis võib siis olla mõistetakse sõlmedena brauseri poolt. Need sõlmed on sarnased puu struktuuri objektid mis määratleb, kuidas kogu leht peaks olema ehitatud.
CSSOM ja DOM on täielikult eraldi andmemudelid, seetõttu nad on üksteisest eraldi. Aga neil mõlemal on sarnased puustruktuurid, ja mõlemad teenivad sama eesmärki: andes brauserile struktuuri, et muuta ja identifitseerida lehekülje erinevaid elemente.
Miks veebiarendajad peaksid hoolt kandma
Kuna kõik renderdamine juhtub taustal, sa ei pea CSSOMi puust palju muretsema. Aga see võib olla kasulik mõista, kuidas see toimib.
Üks asi on meeles pidada, et CSSOM peab olema täielikult laaditud enne veebilehe kuvamist, sest see määrab, kuidas iga lehekülje element peaks välja nägema. Kui lehekülg on laaditud enne CSSOM-i, ilmuks see kõigepealt tavaliseks HTML-ks, millele järgneb stiilid mõne sekundi pärast.
Brauserid väldivad seda eriti, sest see oleks lõppkasutajatele segadust tekitav. Ja tasub märkida, et CSSOM ei saa vahemällu salvestada; see peab olema taastatakse igal lehel.
Tegelikke CSS-faile saab salvestada vahemällu, et laadida varasid kiiremini, kuid muuta brauseris leht nõuab alati CSSOMi parserit. See tähendab ka seda, et JavaScript võib avaldamist ja jõudlust negatiivselt mõjutada.
Soovitan lugeda seda artiklit, et saada rohkem teavet väliste CSS / JS ressursside ja nende laadimisaegade kohta.
Parim viis oma saidi optimeerimiseks on a looduslik kaskaad ressursse laaditakse tandemina.
CSSOMi on võimalik manipuleerida JavaScriptiga, sest see on tehniliselt JS API. Kuid see ei ole enamasti eesmärk, võrreldes JavaScript DOM-i manipuleerimisega.
Suurem põhjus CSSOMi kohta on õppida ennast harrastama, kuidas veebisaidid tegelikult töötavad.
On palju asju, mida me iseenesestmõistetavalt võtame, et hoida internet sujuvalt. Kui sa mõistad natuke rohkem kogu protsessi kohta, saate visualiseerida, kuidas kogu asi kokku tuleb, ja loodetavasti mõista, et World Wide Web on olemas.
Lisalugemist
Loodan, et see intro annab teile kindla ülevaate sellest, mida CSS-objektimudel on ja kuidas see mõjutab veebilehti. Seal ei ole palju CSSOMis manipuleerida, nii et see erineb natuke DOMist.
Siiski on see veebitehnoloogias endiselt kriitiline tehnoloogia ning see peaks selgitama brauseri renderdamise peamisi aspekte.
CSSOMi ja selle toimimise üle on palju muid ressursse. Kui soovite rohkem teada saada, on siin mõned soovitused, mida soovitan:
- CSS-i objektimudeli ülevaade
- CSSOMi uurimine: CSS Object Analyzer tegemine
- Mida iga Frontend Developer peaks teadma veebilehe renderdamisest
