Många saker händer emellan första HTTP-förfrågan och den slutgiltig leverans av en webbsida. Dataöverföringen och renderingsprocessen för webbläsaren kräver många olika tekniker, en av dem är CSS-objektmodelleller den CSSOM.
CSS-objektmodellen tar CSS-koden och representerar varje väljare i en trädstruktur för att underlätta analysen. Det kanske inte är avgörande för utvecklare att helt förstå detta koncept, men det är ett värdefullt ämne att studera om du vill lära dig mer om det. hur webbläsare renderar kod till en fungerande webbplats.
I det här inlägget kommer jag att täcka grunderna i CSS-objektmodellen och visa dig hur det fungerar.
Vad är CSSOM?
Termen CSS-objektmodell beskriver en mappa alla CSS-väljare och relevanta egenskaper för varje väljare. Dessa stilar kan vara rotelement eller ha kapslade underordnade.
CSSOM är väldigt lik DOM i HTML, som står för Document Object Model. Båda är en del av kritisk renderingsväg vilket är en rad steg som måste hända rendera en webbplats korrekt. Alla dessa processer sker automatisktbakom kulisserna.
Så varför är CSSOM viktigt? Det är den karta som navigatorn använder för att rendera CSS-stilar korrekt På en hemsida. Det finns inget enkelt sätt att tala om för en dator att alla stycken i en .main-content div ska ha extra radhöjd.
Lösningen är CSS-objektmodellen som kartlägger alla element och egenskaper av din CSS-kod.
CSSOM gör det enklare för webbläsaren rendera stilar på sidan. Det hela är väldigt tekniskt, men det är värt att förstå processen lite, speciellt om du bygger webbplatser.
Hur fungerar det
Både DOM och CSSOM är det används ofta av alla webbläsare att tolka och rendera webbsidor. Följande diagram är Google Developer’s Guide to Web Fundamentalsoch förklara hur DOM renderas i en webbläsare.
I både DOM och CSSOM finns all information konverteras från byte till digitala kartor som representerar varje element i ett webbdokument. Processen fungerar enligt följande:
- Navigatorn ladda ner HTML för en webbsida.
- Under bearbetning av HTML kan parsern stöta på ett länkelement hänvisar till en extern stilmall.
- Denna CSS-stilmall är då analyseras på en karta använda CSS-objektmodellspecifikationer.
- Den resulterande koden kan då vara tillämpas på element i DOM.
Allt detta sker väldigt snabbt och inträffar med varje sidförfrågan. Detta andra diagram nedan visar en Exempel på CSSOM-trädstruktur.
Lägg märke till hur vissa egenskaper i diagrammet har ljusare grå färger. Dessa egenskaper är ärvt av fadern. Eftersom brödtexten har en specifik teckenstorlek får alla element i kroppen också den teckenstorleken om de inte åsidosätts.
HTML- och CSS-strängar är omvandlas till tokens vilket då kan vara förstås som noder av webbläsaren. Dessa noder är som objekt inom trädstrukturen som definierar hur hela sidan ska byggas.
CSSOM och DOM är helt separata datamodellerdärför är de det analyseras separat från varandra. Men det har de båda liknande trädstruktureroch båda har samma syfte: att ge webbläsaren en struktur för att representera och identifiera olika element på sidan.
Varför webbutvecklare bör bry sig
Sedan all rendering händer i backend, du behöver egentligen inte oroa dig mycket för CSSOM-trädet. Men det kan vara bra att förstå hur det fungerar.
En sak att komma ihåg är att CSSOM måste vara fulladdat innan webbsidan visas, eftersom den kommer att definiera hur varje element på sidan ska se ut. Om sidan laddades före CSSOM kommer den att visas som vanlig HTML först, följt av stilarna några sekunder senare.
Webbläsare undviker specifikt detta eftersom det skulle vara förvirrande för slutanvändare. Och det är värt att notera att CSSOM kan inte cachelagras; måste vara återskapas på varje sida.
Faktiska CSS-filer kan cachelagras för att ladda resurser snabbare men rendera en sida i webbläsaren. kräver alltid att CSSOM-parsern körs. Detta innebär också att JavaScript kan ha en negativ inverkan på rendering och prestanda.
Jag skulle starkt rekommendera det läser den här artikeln för mer information om externa CSS/JS-resurser och deras laddningstider.
Det bästa sättet att optimera din webbplats är att skapa en naturligt vattenfall av resurser som debiteras samtidigt.
Det är möjligt att manipulera CSSOM med JavaScript eftersom det är det tekniskt sett ett JS API. Men det är inte till stor nytta jämfört med JavaScript DOM-manipulation.
Det viktigaste skälet att lära sig om CSSOM är att bli bättre informerad om hur webbplatser verkligen fungerar.
Det finns många saker vi tar för givet som gör att internet fungerar smidigt. När du förstår lite mer om hela processen kommer du att kunna visualisera hur det hela utspelar sig, och förhoppningsvis kommer du att få lite uppskattning för existensen av World Wide Web.
Andra läsningar
Jag hoppas att den här introduktionen kan ge dig en solid uppfattning om vad CSS-objektmodellen är och hur den påverkar webbsidor. där Det finns inte mycket att manipulera i CSSOM.så det skiljer sig lite från DOM.
Det är dock fortfarande en kritisk teknik inom webbutveckling och bör klargöra viktiga aspekter av webbläsarrendering.
Det finns många andra resurser som diskuterar CSSOM och hur det fungerar. Om du vill lära dig mer, här är några inlägg jag rekommenderar:
