Nybörjarhandboken till CSS Object Model (CSSOM)

Mycket händer mellan Första HTTP-förfrågan och den slutgiltig leverans av en webbsida. Datatransmission och webbläsarens reningsrörledning kräver många olika teknologier, en av dem är CSS-objektmodell, eller den CSSOM.

CSS-objektmodellen tar CSS-koden och gör varje väljare in i en trädstruktur för enklare analysering. Kanske är det inte viktigt för utvecklare att fullt ut förstå detta koncept, men det är ett värdefullt ämne att studera om du vill lära dig mer om hur webbläsare gör kod till en fungerande webbplats.

I det här inlägget kommer jag att täcka grunderna för CSS Object Model, och visa hur det fungerar.

Vad är CSSOM?

Termen CSS Object Model beskriver a karta över alla CSS-väljare och relevanta egenskaper för varje väljare. Dessa stilar kan vara rotelement eller ha kapslade barn.

CSSOM är mycket lik den DOM i HTML, vilket står för Document Object Model. Båda är en del av kritisk återgivningsväg vilket är en rad steg som måste hända med korrekt göra en hemsida. Alla dessa processer händer automatiskt, bakom kulisserna.

Så varför är CSSOM viktigt? Det är kartan som används av webbläsaren till korrekt göra CSS-stilar på en webbsida. Det finns inget enkelt sätt att berätta för en dator att alla stycken i a .huvudinnehåll div måste ha extra linjehöjd.

Lösningen är CSS Object Model som kartlägger alla element och egenskaper från din CSS-kod.

CSSOM gör det enklare för webbläsaren att gör stilar på sidan. Hela saken är mycket teknisk men det är värt att förstå lite om processen, särskilt om du bygger webbplatser.

Hur det fungerar

Både DOM och CSSOM är används i stor utsträckning av alla webbläsare att tolka och göra webbsidor. Diagrammet nedan är från Google Developers Web Fundamentals Guide och förklarar hur DOM görs i en webbläsare.

I både DOM & CSSOM är all information tillgänglig konverteras från byte till digitala kartor som gör varje element i ett webbdokument. Processen fungerar enligt följande:

1. Webbläsaren hämtar HTML för en webbsida.
2. Under behandlingen av HTML kan parsern stöta på ett länkelement hänvisar till ett externt stilark.
3. Det här CSS-stilarket är då analyseras i en karta med hjälp av CSS Object Model-specifikationerna.
4. Den resulterande koden kan då vara appliceras på element i DOM.

Allt detta händer väldigt snabbt och uppträder med varje enskild sidförfrågan. Detta andra diagram nedan visar en exempel träd struktur av CSSOM.

Lägg märke till hur vissa egenskaper i diagrammet har ljusare grå teckensfärger. Dessa egenskaper är ärvt från föräldern. Eftersom kroppen har en viss teckenstorlek, får alla element i kroppen också den teckensnittsstorleken om den inte överskrids.

HTML och CSS strängar är omvandlas till tokens vilket kan då vara förstås som noder av webbläsaren. Dessa noder är som föremål inom trädstrukturen som definierar hur hela sidan ska byggas.

CSSOM och DOM är helt separata datamodeller, därför är de analyseras separat från varandra. Men de båda har liknande trädstrukturer, och båda tjänar samma syfte: ger webbläsaren en struktur för att göra och identifiera olika element på sidan.

Varför webbutvecklare ska bry sig

Sedan alla rendering händer på backend, du behöver verkligen inte oroa dig mycket om CSSOM-trädet. Men det kan vara användbart att förstå hur det fungerar.

En sak att komma ihåg är att CSSOM måste vara fullt lastad innan webbsidan kommer att visas, eftersom det kommer att definiera hur varje element på sidan ska se ut. Om sidan laddas före CSSOM visas den som vanlig HTML först, följt av stilar några sekunder senare.

Browsare undviker specifikt det eftersom det skulle vara förvirrande för slutanvändare. Och det är värt att notera att CSSOM kan inte cachas; den måste vara återskapas på varje sida.

Faktiska CSS-filer kan cachas för att ladda tillgångarna snabbare men att göra en sida i webbläsaren kräver alltid att man kör CSSOM-parsern. Detta innebär också att JavaScript kan ha en negativ inverkan på rendering och prestanda.

Jag rekommenderar starkt att du läser den här artikeln för att lära dig mer om externa CSS / JS-resurser och deras belastningstider.

Det bästa sättet att optimera din webbplats är att skapa en naturlig kaskad av resurser som laddas i tandem.

Det är möjligt att manipulera CSSOM med JavaScript eftersom det är tekniskt ett JS API. Men det tjänar inte mycket av ett syfte jämfört med JavaScript DOM-manipulation.

Ju större anledning att lära sig om CSSOM är att ytterligare utbilda dig själv om hur webbplatser faktiskt fungerar.

Det finns massor av saker som vi tar för givet som gör att Internet går smidigt. När du förstår lite mer om hela processen kan du visualisera hur det hela kommer samman, och förhoppningsvis få en uppskattning av existensen av World Wide Web.

Vidare läsning

Jag hoppas att det här introet kan ge dig en gedigen uppfattning om vad CSS Object Model är och hur det påverkar webbsidor. där Det är inte mycket att manipulera i CSSOM, så det skiljer sig lite från DOM.

Men det är fortfarande en kritisk teknik i webbutveckling, och det borde klargöra stora aspekter av webbläsarframställning.

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:

• CSS Objektmodellöversikt
• Utforska CSSOM: Skapa en CSS Object Analyzer
• Vad varje Frontend-utvecklare borde veta om webbsida Rendering