Sådan rendere en side: Parsing, DOM, CSSOM, layout og paint
Se, hvad browseren gør med HTML- og CSS-bytes: opbygger DOM og CSSOM, beregner layout og maler pixels.
Sådan rendere en side: Parsing, DOM, CSSOM, layout og paint er en gratis Frontend Academy-lektion på CoddyKit. Dette er lektion 3 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i Frontend Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Frontend Academy-kurset indeholder 4 lektioner i alt.
Fra bytes til pixels
Når browseren modtager HTML-bytes fra serveren, omdanner en proces i flere trin dem til de pixels, du ser på skærmen. Når du kender denne kæde, kan du optimere ydeevnen og forstå, hvad der forårsager visuelle fejl.
Trin 1 — Parsing af HTML: DOM'en opbygges
Browserens HTML-parser læser byte-strømmen og opbygger Document Object Model (DOM) — et træ af noder, der repræsenterer hvert HTML-element, hver tekstnode og hver kommentar i dokumentet.
<!-- This HTML... -->
<div>
<p>Hello</p>
</div>
// ...becomes a DOM tree:
// Document
// └── html
// └── body
// └── div
// └── p
// └── 'Hello'Trin 2 — Parsing af CSS: CSSOM'en opbygges
Samtidig parses CSS-bytes til CSS Object Model (CSSOM) — et træ af stilregler. CSS blokerer gengivelsen: Browseren tegner ikke pixels, før den har beregnet stilarter for det synlige indhold.
Trin 3 — Gengivelsestræet
Browseren kombinerer DOM og CSSOM til gengivelsestræet. Kun synlige noder medtages — elementer med display:none udelukkes. Hver node i gengivelsestræet indeholder den beregnede stil, den skal tegnes med.
Trin 4 — Layout (ombrydning)
Layout beregner den nøjagtige placering og størrelse for hver node i gengivelsestræet ved hjælp af boksmodellen og viewportens bredde. Dette kaldes også reflow. Layout er ressourcekrævende, så undgå at udløse det gentagne gange i JavaScript.
Trin 5 — Tegning
Tegning omdanner layoutet til faktiske pixels på skærmen. Browseren tegner baggrunde, kanter, tekst og billeder lag for lag. Nogle elementer opretter deres egne sammensætningslag til GPU-accelereret gengivelse.
Trin 6 — Sammensætning
Browserens compositor kombinerer de tegnede lag til den endelige ramme og sender den til skærmen. Når du bruger transform og opacity til animationer, kan compositeren køre dem på GPU'en og helt springe layout og tegning over.
Hvad blokerer gengivelsen?
CSS i <head> blokerer gengivelsen. JavaScript blokerer som standard både parseren og gengivelsen. Brug defer på script-tags for at parse JS efter HTML uden at blokere gengivelsen.
<script src="app.js" defer></script>Den kritiske gengivelsessti
Den kritiske gengivelsessti er rækkefølgen fra modtagelsen af HTML-bytes til visningen af den første pixel. Optimering af den betyder, at du minimerer antallet og størrelsen af ressourcer, der blokerer gengivelsen, og udskyder ikke-kritisk JS og CSS.
Ombrydning vs. gentegning
Ændring af layoutegenskaber (width, margin, position) udløser ombrydning + gentegning. Ændring af egenskaber, der kun påvirker udseendet (color, background), udløser kun gentegning. Ændring af transform/opacity udløser kun sammensætning. Foretræk den billigste operation.
DevTools: Se tegningens tidslinje
I Chrome DevTools skal du åbne panelet Ydeevne, optage en sideindlæsning og undersøge vandfaldsvisningen. Du kan se de grønne hændelser for tegning og identificere, hvilke elementer der forårsager ressourcekrævende layouts.
Hurtig kontrol
Hvilket trin beregner den nøjagtige størrelse og placering af hvert element på siden?
Opsummering: Gengivelseskæden
HTML → DOM → CSSOM → gengivelsestræ → layout → tegning → sammensætning. Hvert trin leverer input til det næste. Optimering af den kritiske gengivelsessti betyder, at du forkorter denne kæde, så det første synlige indhold vises så hurtigt som muligt.
Lær HTML med en AI-underviser — gratis
Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.
- Kurser
- 41
- Lektioner
- 163
Ofte stillede spørgsmål
Er lektionen “Sådan rendere en side: Parsing, DOM, CSSOM, layout og paint” gratis?
Ja — hele teksten til “Sådan rendere en side: Parsing, DOM, CSSOM, layout og paint” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af Frontend Academy-kurset, skal du opgradere til CoddyKit PRO. Frontend Academy-kurset indeholder 4 lektioner i alt.
Hvad lærer jeg i “Sådan rendere en side: Parsing, DOM, CSSOM, layout og paint”?
Se, hvad browseren gør med HTML- og CSS-bytes: opbygger DOM og CSSOM, beregner layout og maler pixels. Du øver dig i Frontend Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.
Skal jeg have erfaring for at begynde på Frontend Academy?
Der kræves ingen tidligere erfaring. Frontend Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 3 af 4.
Hvor lang tid tager lektionen “Sådan rendere en side: Parsing, DOM, CSSOM, layout og paint”?
De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.
Kan jeg skrive og køre kode i denne Frontend Academy-lektion?
Ja. Alle Frontend Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.
Alle lektioner i dette kursus
- Browsere, DNS og HTTP: Anmodningens livscyklus
- HTML, CSS og JavaScript: Hvert lags opgave
- Sådan rendere en side: Parsing, DOM, CSSOM, layout og paint
- Udviklerværktøjer: Åbn og brug DevTools