Beginners Guide til CSS Object Model (CSSOM)

Der sker meget mellem Første HTTP-anmodning og endelig levering af en webside. Dataoverførsel og browserens renderingsledning kræver mange forskellige teknologier, en af ​​dem er den CSS Object Model, eller den CSSOM.

CSS Object Model tager CSS-koden og gør hver vælger ind i en træstruktur for lettere parsing. Måske er det ikke vigtigt for udviklere at forstå dette koncept fuldt ud, men det er et værdifuldt emne at studere, hvis du vil lære mere om hvordan browsere gør kode til en fungerende hjemmeside.

I dette indlæg skal jeg dække det grundlæggende i CSS Object Model, og vise dig, hvordan det virker.

Hvad er CSSOM?

Udtrykket CSS Object Model beskriver a Kort over alle CSS-selektorer og relevante egenskaber for hver vælger. Disse stilarter kan være rodelementer eller have indlejrede børn.

CSSOM ligner meget på DOM i HTML, som står for dokumentobjektmodel. Begge er en del af kritisk gengivelsessti som er en række trin, der skal ske korrekt lave en hjemmeside. Alle disse processer sker automatisk, bag scenen.

Så hvorfor er CSSOM vigtigt? Det er det kort, som browseren bruger til korrekt lave CSS stilarter på en webside. Der er ingen nem måde at fortælle en computer på, at alle afsnit i a .main-indhold div skal have ekstra linjehøjde.

Løsningen er CSS Object Model som kortlægger alle elementer og egenskaber fra din CSS-kode.

CSSOM gør det nemmere for browseren at lav stilarter på siden. Det hele er meget teknisk, men det er værd at forstå lidt om processen, især hvis du opbygger websites.

Hvordan det virker

Både DOM og CSSOM er bruges i vid udstrækning af alle webbrowsere at fortolke og gøre websider. Diagrammet nedenfor er fra Google Developers Web Fundamentals Guide, og forklarer hvordan DOM gengives i en webbrowser.

I både DOM & CSSOM er al information konverteret fra bytes til digitale kort som gør hvert element i et webdokument. Processen fungerer som følger:

1. Browseren downloader HTML'en til en webside.
2. Mens du behandler HTML'en, kan parseren støde på et linkelement refererer til et eksternt stilark.
3. Dette CSS stilark er da analyseret i et kort ved hjælp af CSS Object Model specs.
4. Den resulterende kode kan så være anvendt til elementer i DOM.

Alt dette sker meget hurtigt og forekommer med hver enkelt sideforespørgsel. Dette andet diagram nedenfor viser et CSSOM-eksempelstrukturen.

Bemærk hvordan nogle egenskaber i diagrammet har lettere grå skriftfarver. Disse egenskaber er arvet fra forældrene. Da kroppen har en bestemt skriftstørrelse, får alle elementer i kroppen også den skrifttype, medmindre den er overskredet.

HTML og CSS strenge er konverteret til tokens hvilket kan da være forstået som knuder af browseren. Disse knuder er som objekter i træstrukturen der definerer, hvordan hele siden skal konstrueres.

CSSOM og DOM er helt separate datamodeller, derfor er de analyseres separat fra hinanden. Men de begge har lignende træstrukturer, og begge tjener det samme formål: giver browseren en struktur til at gøre og identificere forskellige elementer på siden.

Hvorfor webudviklere bør pleje

Siden hele gengivelsen sker på bagenden, du behøver virkelig ikke bekymre dig meget om CSSOM-træet. Men det kan være nyttigt at forstå, hvordan det virker.

En ting at huske er, at CSSOM skal være fuldt indlæst før websiden bliver vist, da den vil definere, hvordan hvert element på siden skal se ud. Hvis den side, der er indlæst før CSSOM, vises den som almindelig HTML først, efterfulgt af stilarterne et par sekunder senere.

Browsere undgår specifikt det, fordi det ville være forvirrende for slutbrugere. Og det er værd at bemærke, at CSSOM kan ikke cachelages; det må være genskabt på hver side.

Faktiske CSS-filer kan caches for at indlæse aktiverne hurtigere, men at gøre en side i browseren kræver altid at køre CSSOM-parseren. Dette betyder også, at JavaScript kan have en negativ indvirkning på rendering og ydeevne.

Jeg vil meget anbefale at læse denne artikel for at lære mere om eksterne CSS / JS ressourcer og deres belastningstider.

Den bedste måde at optimere dit websted på er at lave en naturlig kaskade af ressourcer som er indlæst i tandem.

Det er muligt at manipulere CSSOM ved hjælp af JavaScript, fordi det er teknisk en JS API. Men det tjener ikke meget af et formål i forhold til JavaScript DOM manipulation.

Den større grund til at lære om CSSOM er at uddybe dig selv om, hvordan hjemmesider rent faktisk virker.

Der er mange ting, vi tager for givet, som holder internettet i gang. Når du forstår lidt mere om hele processen, kan du visualisere, hvordan det hele kommer sammen, og forhåbentlig få en vis forståelse for eksistensen af ​​World Wide Web.

Yderligere læsning

Jeg håber, at denne intro kan give dig en solid ide om, hvad CSS Object Model er, og hvordan det påvirker websider. der Det er ikke meget at manipulere i CSSOM, så det adskiller sig lidt fra DOM.

Men det er stadig en kritisk teknologi i webudvikling, og det bør afklare vigtige aspekter ved browsergengivelse.

Der er mange andre ressourcer, der diskuterer CSSOM, og hvordan det fungerer. Hvis du ønsker at lære mere, her er nogle indlæg jeg anbefaler:

• CSS Object Model Oversigt
• Exploring CSSOM: Lav en CSS Object Analyzer
• Hvad enhver Frontend-udvikler bør vide om webside-rendering