Begynnerveiledningen til CSS Object Model (CSSOM)

Det skjer mye mellom første HTTP-forespørsel og siste levering av en nettside. Dataoverføring og nettleserens renderingspipeline krever mange forskjellige teknologier, en av dem er CSS objektmodell, eller CSSOM.

CSS Object Model tar CSS-koden, og gjør hver velger inn i en trestruktur for enklere parsing. Kanskje det ikke er avgjørende for utviklere å forstå dette konseptet fullt ut, men det er et verdifullt emne å studere hvis du vil lære mer om hvordan nettlesere gjør kode til en fungerende nettside.

I dette innlegget skal jeg dekke grunnleggende om CSS Object Model, og vise deg hvordan det fungerer.

Hva er CSSOM?

Begrepet CSS Object Model beskriver a Kart over alle CSS-valgene og relevante egenskaper for hver velger. Disse stilene kan være rotelementer eller ha nestede barn.

CSSOM ligner veldig på DOM i HTML, som står for Document Object Model. Begge er en del av kritisk gjengivelsesbane som er en rekke trinn som må skje med Lag et nettsted på riktig måte. Alle disse prosessene skje automatisk, Bak scenen.

Så hvorfor er CSSOM viktig? Det er kartet som brukes av nettleseren til riktig gjengi CSS stiler på en nettside. Det er ingen enkel måte å fortelle en datamaskin om at alle avsnitt i a .hovedinnhold div må ha ekstra linjehøyde.

Løsningen er CSS Object Model som kartlegger alle elementer og egenskaper fra CSS-koden din.

CSSOM gjør det enklere for nettleseren å gjengi stiler på siden. Hele greia er veldig teknisk, men det er verdt å forstå litt om prosessen, spesielt hvis du bygger nettsteder.

Hvordan det fungerer

Både DOM og CSSOM er brukt mye av alle nettlesere å tolke og gjengi nettsider. Diagrammet nedenfor er fra Google Developers Web Fundamentals Guide, og forklarer hvordan DOM gjengis i en nettleser.

I både DOM & CSSOM er all informasjonen konvertert fra byte til digitale kart som gjengir hvert element i et webdokument. Prosessen fungerer som følger:

1. Nettleseren laster ned HTML for en nettside.
2. Når du behandler HTML, kan parseren støte på et koblingselement refererer til et eksternt stilark.
3. Dette CSS stilarket er da analysert i et kart ved hjelp av CSS Object Model-spesifikasjonene.
4. Den resulterende koden kan da være brukes på elementer i DOM.

Alt dette skjer veldig fort, og oppstår med hver enkelt sideforespørsel. Dette andre diagrammet nedenfor viser et eksempel tre struktur av CSSOM.

Legg merke til hvordan noen egenskaper i diagrammet har lettere grå skriftfarger. Disse egenskapene er arvet fra foreldrene. Siden kroppen har en bestemt skriftstørrelse, får alle elementene i kroppen også den skriftstørrelsen, med mindre den er overstyrt.

HTML og CSS strenger er konvertert til tokens som da kan være forstått som noder av nettleseren. Disse noderne er som gjenstander innenfor trestrukturen som definerer hvordan hele siden skal bygges.

CSSOM og DOM er helt separate datamodeller, derfor er de analyseres separat fra hverandre. Men de har begge lignende tre strukturer, og begge tjener samme formål: gi nettleseren en struktur for å gjengi og identifisere forskjellige elementer på siden.

Hvorfor webutviklere burde bry seg

Siden all rendering skjer på baksiden, du trenger ikke å bekymre deg mye om CSSOM-treet. Men det kan være nyttig å forstå hvordan det fungerer.

En ting å huske er at CSSOM må være fullt lastet før nettsiden vil bli vist, da det vil definere hvordan hvert element på siden skal se ut. Hvis siden lastet før CSSOM, vil det virke som vanlig HTML først, etterfulgt av stilene noen få sekunder senere.

Nettlesere unngår spesielt det fordi det ville være forvirrende for sluttbrukere. Og det er verdt å merke seg at CSSOM kan ikke bufres; det må være gjenskapes på hver side.

Faktiske CSS-filer kan bufres for å laste eiendelene raskere, men gjengir en side i nettleseren krever alltid å kjøre CSSOM-parseren. Dette betyr også at JavaScript kan ha en negativ innvirkning på gjengivelse og ytelse.

Jeg vil sterkt anbefale å lese denne artikkelen for å lære mer om eksterne CSS / JS ressurser og deres belastningstider.

Den beste måten å optimalisere nettstedet ditt er ved å lage en naturlig kaskade av ressurser som er lastet i tandem.

Det er mulig å manipulere CSSOM ved hjelp av JavaScript fordi det er teknisk en JS API. Men det tjener ikke mye av en hensikt i forhold til JavaScript DOM-manipulering.

Jo større grunn til å lære om CSSOM er å videreutdanne deg selv om hvordan nettsteder faktisk fungerer.

Det er mange ting vi tar for gitt som holder internett i gang. Når du forstår litt mer om hele prosessen, kan du visualisere hvordan det hele kommer sammen, og forhåpentligvis få noen takknemlighet for eksistensen av World Wide Web.

Videre lesning

Jeg håper dette introet kan gi deg en solid ide om hva CSS Object Model er, og hvordan det påvirker nettsider. Der Det er ikke mye å manipulere i CSSOM, så det adskiller seg litt fra DOM.

Men det er fortsatt en kritisk teknologi i webutvikling, og det bør klargjøre viktige aspekter ved nettlesergjengering.

Det er mange andre ressurser som diskuterer CSSOM, og hvordan det fungerer. Hvis du ønsker å lære mer, her er noen innlegg jeg anbefaler:

• CSS Object Model Oversikt
• Utforske CSSOM: Lag en CSS Object Analyzer
• Hva hver Frontend-utvikler burde vite om nettsida-rendering