Slik gjengis en side: parsing, DOM, CSSOM, layout og maling
Se hva nettleseren gjør med HTML- og CSS-bytene: bygger DOM og CSSOM, beregner layout og maler piksler.
Slik gjengis en side: parsing, DOM, CSSOM, layout og maling er en gratis leksjon i Frontend Academy på CoddyKit. Dette er leksjon 3 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Frontend Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Frontend Academy inneholder totalt 4 leksjoner.
Fra bytes til piksler
Når nettleseren mottar HTML-bytes fra serveren, omdanner en prosess i flere trinn dem til pikslene De ser på skjermen. Når De kjenner denne prosessen, blir det enklere å optimalisere ytelsen og forstå hva som forårsaker visuelle feil.
Trinn 1 — Parsing av HTML: DOM bygges
Nettleserens HTML-parser leser byte-strømmen og bygger Document Object Model (DOM) – et tre av noder som representerer 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'Trinn 2 — Parsing av CSS: CSSOM bygges
Samtidig analyseres CSS-bytes til CSS Object Model (CSSOM) – et tre av stilregler. CSS er render-blokkerende: Nettleseren tegner ikke piksler før den har beregnet stiler for det synlige innholdet.
Trinn 3 — Render Tree
Nettleseren kombinerer DOM og CSSOM til Render Tree. Bare synlige noder tas med – elementer med display:none utelates. Hver node i render-treet inneholder den beregnede stilen den skal tegnes med.
Trinn 4 — Layout (Reflow)
Layout beregner den nøyaktige plasseringen og størrelsen til hver node i render-treet ved hjelp av boksmodellen og visningsområdets bredde. Dette kalles også reflow. Layout er kostbart; unngå å utløse det gjentatte ganger i JavaScript.
Trinn 5 — Tegning
Tegning konverterer layouten til faktiske piksler på skjermen. Nettleseren tegner bakgrunner, kantlinjer, tekst og bilder lag for lag. Noen elementer oppretter egne kompositeringslag for GPU-akselerert gjengivelse.
Trinn 6 — Kompositering
Nettleserens kompositor kombinerer de tegnede lagene til den endelige rammen og sender den til skjermen. Når transform og opacity brukes til animasjoner, kan kompositoren kjøre dem på GPU-en og hoppe over layout og tegning helt.
Hva blokkerer gjengivelsen?
CSS i <head> er gjengivelsesblokkerende. JavaScript er som standard både parserblokkerende og gjengivelsesblokkerende. Bruk defer på script-tagger for å analysere JS etter HTML uten å blokkere gjengivelsen.
<script src="app.js" defer></script>Kritisk gjengivelsesbane
Critical Rendering Path er sekvensen fra mottak av HTML-bytes til den første pikselen vises. Optimalisering av den innebærer å minimere antallet og størrelsen på ressurser som blokkerer gjengivelsen, samt å utsette ikke-kritisk JS og CSS.
Reflow kontra repaint
Endring av layout-egenskaper (width, margin, position) utløser reflow + repaint. Endring av egenskaper som bare påvirker utseendet (color, background) utløser bare repaint. Endring av transform/opacity utløser bare kompositering. Velg den minst kostbare operasjonen.
DevTools: Se tegningstidslinjen
I Chrome DevTools åpner De Performance-panelet, registrerer en sideinnlasting og undersøker fossefallsvisningen. De vil se de grønne Painting-hendelsene og kan identifisere hvilke elementer som forårsaker kostbare layoutberegninger.
Kort kontroll
Hvilket trinn beregner den nøyaktige størrelsen og plasseringen til hvert element på siden?
Oppsummering: Gjengivelsesprosessen
HTML → DOM → CSSOM → Render Tree → Layout → Paint → Composite. Hvert trinn leverer input til det neste. Optimalisering av den kritiske gjengivelsesbanen innebærer å forkorte denne prosessen, slik at det første synlige innholdet vises så raskt som mulig.
Lær deg HTML med en AI-veileder – gratis
Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.
- Kurs
- 41
- Leksjoner
- 163
Ofte stilte spørsmål
Er leksjonen «Slik gjengis en side: parsing, DOM, CSSOM, layout og maling» gratis?
Ja – hele teksten i «Slik gjengis en side: parsing, DOM, CSSOM, layout og maling» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av Frontend Academy-kurset, kan du oppgradere til CoddyKit PRO. Kurset i Frontend Academy inneholder totalt 4 leksjoner.
Hva lærer jeg i «Slik gjengis en side: parsing, DOM, CSSOM, layout og maling»?
Se hva nettleseren gjør med HTML- og CSS-bytene: bygger DOM og CSSOM, beregner layout og maler piksler. Du øver på Frontend Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.
Trenger jeg erfaring for å begynne med Frontend Academy?
Ingen tidligere erfaring er nødvendig. Frontend Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 3 av 4.
Hvor lang tid tar leksjonen «Slik gjengis en side: parsing, DOM, CSSOM, layout og maling»?
De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.
Kan jeg skrive og kjøre kode i denne Frontend Academy-leksjonen?
Ja. Alle Frontend Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.
Alle leksjonene i dette kurset
- Nettlesere, DNS og HTTP: forespørselens livssyklus
- HTML, CSS og JavaScript: hver lagdelings oppgave
- Slik gjengis en side: parsing, DOM, CSSOM, layout og maling
- Utviklerverktøy: åpne og bruke DevTools