Hoe een pagina wordt gerenderd: parsing, DOM, CSSOM, layout en paint
Bekijk wat de browser doet met de HTML- en CSS-bytes: de DOM en CSSOM opbouwen, de layout berekenen en pixels tekenen.
Hoe een pagina wordt gerenderd: parsing, DOM, CSSOM, layout en paint is een gratis Frontend Academy-les op CoddyKit. Dit is les 3 van 4. Je kunt de volledige les hieronder gratis lezen en daarna in de browser praktisch oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject Frontend Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Frontend Academy bevat in totaal 4 lessen.
Van bytes naar pixels
Wanneer de browser HTML-bytes van de server ontvangt, zet een proces in meerdere stappen deze om in de pixels die je op het scherm ziet. Als je deze verwerkingsketen kent, kun je de prestaties optimaliseren en begrijpen waardoor visuele haperingen ontstaan.
Stap 1 — HTML parseren: de DOM opbouwen
De HTML-parser van de browser leest de bytestroom en bouwt de Document Object Model (DOM) op — een boomstructuur van knooppunten die elk HTML-element, tekstknooppunt en commentaar in het document vertegenwoordigen.
<!-- This HTML... -->
<div>
<p>Hello</p>
</div>
// ...becomes a DOM tree:
// Document
// └── html
// └── body
// └── div
// └── p
// └── 'Hello'Stap 2 — CSS parseren: de CSSOM opbouwen
Tegelijkertijd worden CSS-bytes geparseerd naar de CSS Object Model (CSSOM) — een boomstructuur van stijlregels. CSS is renderblokkerend: de browser tekent pas pixels nadat de stijlen voor de zichtbare inhoud zijn berekend.
Stap 3 — De renderboom
De browser combineert de DOM en CSSOM tot de renderboom. Alleen zichtbare knooppunten worden opgenomen — elementen met display:none worden uitgesloten. Elk knooppunt in de renderboom bevat de berekende stijl waarmee het wordt getekend.
Stap 4 — Indeling (reflow)
Indeling berekent de exacte positie en grootte van elk knooppunt in de renderboom met behulp van het boxmodel en de breedte van de viewport. Dit wordt ook reflow genoemd. Een indeling berekenen is duur; voorkom dat je dit herhaaldelijk in JavaScript activeert.
Stap 5 — Tekenen
Tekenen zet de indeling om in echte pixels op het scherm. De browser tekent achtergronden, randen, tekst en afbeeldingen laag voor laag. Sommige elementen maken eigen compositielagen voor GPU-versnelde weergave.
Stap 6 — Samenvoegen
De compositor van de browser voegt de getekende lagen samen tot het uiteindelijke beeld en stuurt dit naar het scherm. Als je transform en opacity voor animaties gebruikt, kan de compositor ze op de GPU uitvoeren en indeling en tekenwerk volledig overslaan.
Wat blokkeert het renderen?
CSS in de <head> blokkeert het renderen. JavaScript blokkeert standaard zowel het parseren als het renderen. Gebruik defer op script-tags om JS na HTML te parseren zonder het renderen te blokkeren.
<script src="app.js" defer></script>Kritieke renderroute
De kritieke renderroute is de reeks vanaf het ontvangen van HTML-bytes tot het weergeven van de eerste pixel. Optimaliseren betekent dat je het aantal en de omvang van renderblokkerende bronnen beperkt en niet-kritieke JS en CSS uitstelt.
Reflow versus opnieuw tekenen
Het wijzigen van indelingseigenschappen (width, margin, position) activeert een reflow + repaint. Het wijzigen van eigenschappen die alleen de weergave beïnvloeden (color, background) activeert alleen een repaint. Het wijzigen van transform/opacity activeert alleen compositing. Kies bij voorkeur de goedkoopste bewerking.
DevTools: de tekentijdlijn bekijken
Open in Chrome DevTools het deelvenster Performance, neem het laden van een pagina op en bekijk de watervalgrafiek. Je ziet de groene gebeurtenissen voor tekenen en kunt vaststellen welke elementen dure indelingen veroorzaken.
Korte controle
Welke stap berekent de exacte grootte en positie van elk element op de pagina?
Samenvatting: de renderketen
HTML → DOM → CSSOM → Render Tree → Layout → Paint → Composite. Elke stap levert gegevens voor de volgende. De kritieke renderroute optimaliseren betekent dat je deze keten inkort, zodat de eerste zichtbare inhoud zo snel mogelijk verschijnt.
Leer HTML met een AI-tutor — gratis
Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.
- Cursussen
- 41
- Lessen
- 163
Veelgestelde vragen
Is de les “Hoe een pagina wordt gerenderd: parsing, DOM, CSSOM, layout en paint” gratis?
Ja — de volledige tekst van “Hoe een pagina wordt gerenderd: parsing, DOM, CSSOM, layout en paint” kun je hier gratis op het web lezen. Als je interactief wilt oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is, en de rest van de cursus Frontend Academy wilt ontgrendelen, kun je upgraden naar CoddyKit PRO. De cursus Frontend Academy bevat in totaal 4 lessen.
Wat leer ik in “Hoe een pagina wordt gerenderd: parsing, DOM, CSSOM, layout en paint”?
Bekijk wat de browser doet met de HTML- en CSS-bytes: de DOM en CSSOM opbouwen, de layout berekenen en pixels tekenen. Je oefent met Frontend Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.
Heb ik ervaring nodig om met Frontend Academy te beginnen?
Ervaring vooraf is niet nodig. Frontend Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 3 van 4.
Hoe lang duurt de les “Hoe een pagina wordt gerenderd: parsing, DOM, CSSOM, layout en paint”?
De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.
Kan ik code schrijven en uitvoeren in deze les over Frontend Academy?
Ja. Elke les over Frontend Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.
Alle lessen in deze cursus
- Browsers, DNS en HTTP: de levenscyclus van een request
- HTML, CSS en JavaScript: de taak van elke laag
- Hoe een pagina wordt gerenderd: parsing, DOM, CSSOM, layout en paint
- Developer Tools: DevTools openen en gebruiken