A CSS objektummodell kezdõi útmutatója (CSSOM)
Sokat történik a első HTTP kérés és a végső szállítás egy weboldal megnyitása. Az adatátvitel és a böngésző renderelési csővezetékéhez sok különböző technológia szükséges, az egyik az CSS objektum modell, vagy a CSSOM.
A CSS objektum modell a CSS kódot veszi fel, és minden választót kijelöl egy fa struktúrába a könnyebb elemzéshez. Talán nem feltétlenül szükséges, hogy a fejlesztők teljes mértékben megértsék ezt a fogalmat, de érdemes tanulmányozni, ha többet szeretne megtudni a böngészők kódja egy működő webhelyre.
Ebben a bejegyzésben a CSS objektummodell alapjait lefedem, és megmutatom, hogyan működik.
Mi az a CSSOM?
A CSS objektum modell kifejezést a minden CSS-szelektor térképe és az egyes választók megfelelő tulajdonságai. Ezek a stílusok lehetnek gyökérelemek vagy beágyazott gyerekek.
A CSSOM nagyon hasonlít a DOM HTML-ben, amely a Document Object Model (Dokumentumobjektum-modell). Mindkettő a kritikus megjelenítési útvonal amely egy sor olyan lépést tartalmaz, aminek meg kell történnie megfelelő webhelyet. Mindezek a folyamatok megtörténnek automatikusan, a színfalak mögött.
Akkor miért fontos a CSSOM? Ez a böngésző által használt térkép megfelelően renderelje a CSS-stílusokat egy weboldalon. Nincs egyszerű módja annak, hogy elmondja a számítógépnek, hogy az a .központi téma A divnak extra vonalvastagsággal kell rendelkeznie.
A megoldás a CSS objektum modell, amely feltérképezi az összes elemet és tulajdonságot a CSS kódból.
A CSSOM megkönnyíti a böngésző számára megjelenítheti a stílusokat az oldalon. Az egész nagyon technikai, de érdemes egy kicsit megérteni a folyamatot, különösen, ha weboldalakat építesz.
Hogyan működik
Mind a DOM, mind a CSSOM széles körben használják az összes böngésző weblapok értelmezése és megjelenítése. Az alábbi ábra a Google Fejlesztők webes alapjainak útmutatójából származik, és elmagyarázza, hogyan A DOM webböngészőben jelenik meg.
Mind a DOM & CSSOM-ban minden információ a bájtokból digitális térképekké alakították át amely egy webes dokumentum minden elemét teszi közzé. A folyamat a következőképpen működik:
- A böngésző letölti a HTML-t weboldalt.
- A HTML feldolgozása közben az elemző összekapcsolódhat egy linkelemre hivatkozás egy külső stíluslapra.
- Ez a CSS-stíluslap akkor lesz egy térképre a CSS Objektum Modellek használatával.
- A kapott kód ezután lehet a DOM elemeihez.
Mindez nagyon gyorsan történik, és előfordul minden egyes oldal kéréssel. Ez a másik ábra az alábbiakat mutatja be például a CSSOM fa szerkezete.
Figyeljük meg, hogy a diagram egyes tulajdonságai világosabb szürke betűtípusúak. Ezek a tulajdonságok örökölt a szülőtől. Mivel a testnek egyedi betűmérete van, a testen belüli összes elem ezt a betűméretet is megkapja, kivéve, ha felülírja.
A HTML és a CSS karakterláncok zsetonokká alakították át ami akkor lehet csomópontként értendő a böngésző által. Ezek a csomópontok hasonlóak objektumok a fa szerkezetében amely meghatározza, hogyan kell a teljes oldalt megépíteni.
A CSSOM és a DOM teljesen külön adatmodelleket, ezért ők egymástól elkülönítve. De mindkettőjük van hasonló fa szerkezetek, és mindkettő ugyanazt a célt szolgálja: a böngészőnek egy struktúrát kell megadnia az oldal különböző elemeinek megjelenítéséhez és azonosításához.
Miért kell a webfejlesztőknek gondoskodniuk
Mivel az összes renderelés a backenden történik, tényleg nem kell sokat aggódnia a CSSOM fáról. De hasznos lehet megérteni, hogyan működik.
Egy dolog, hogy emlékezzünk rá, hogy a A CSSOM-nak teljes terhelésnek kell lennie a weblap megjelenése előtt, mivel meghatározza, hogy az oldal minden elemének hogyan kell kinéznie. Ha a CSSOM előtt betöltődött az oldal, először egyszerű HTML-ként jelenik meg, majd néhány másodperccel később a stílusok követik.
A böngészők kifejezetten elkerülik ezt, mert zavaró lenne a végfelhasználók számára. És érdemes megjegyezni, hogy a CSSOM nem lehet tárolni; kell lennie minden oldalon újra felépítették.
A tényleges CSS-fájlokat gyorsítótárba lehet helyezni annak érdekében, hogy az eszközöket gyorsabban töltsék be, de egy oldalt a böngészőben mindig szükség van a CSSOM elemző futtatására. Ez azt is jelenti, hogy a JavaScript negatív hatással lehet a megjelenítésre és a teljesítményre.
Nagyon ajánlom, hogy olvassa el ezt a cikket, ha többet szeretne megtudni a külső CSS / JS erőforrásokról és azok betöltési idejeiről.
A webhely optimalizálásának legjobb módja az a természetes kaszkád forrásokból együtt vannak betöltve.
Lehetőség van a CSSOM használatára a JavaScript használatával, mert technikailag JS API. A JavaScript DOM manipulációjához képest azonban nem sok célt szolgál.
A CSSOM-ról megismerkedhetõ nagyobb ok az, hogy tovább fejlesszük magunkat arról, hogy a weboldalak hogyan mûködnek.
Sok olyan dolog van, amit magától értetődőnek tartunk, hogy az internet zökkenőmentesen működjön. Ha egy kicsit jobban megérti az egész folyamatot, akkor láthatóvá tehetjük, hogyan jön össze az egész dolog, és remélhetőleg elismerést nyer a World Wide Web létezéséért..
További irodalom
Remélem, hogy ez a bevezető szilárd képet adhat arról, hogy mi a CSS objektummodell, és hogyan befolyásolja a weblapokat. Ott nem sok a manipulálás a CSSOM-ban, így kicsit eltér a DOM-tól.
Azonban ez még mindig kritikus technológia a webfejlesztésben, és tisztázni kell a böngésző renderelésének főbb szempontjait.
A CSSOM-ról sok más forrás is beszél, és hogyan működik. Ha többet szeretne megtudni, itt van néhány hozzászólás, amit ajánlok:
- CSS objektum modell áttekintése
- A CSSOM feltárása: CSS objektumelemző készítése
- Mit kell tudnia minden egyes Frontend fejlesztőről a weboldal megjelenítéséről
