Hoe toont de browser een webpagina op het scherm van de gebruiker?

Het proces van het weergeven van een webpagina door de browser omvat verschillende stappen:

1. HTML ophalen — de browser vraagt het HTML-document op bij de server.
2. HTML parseren — er wordt een DOM (Document Object Model) boom opgebouwd.
3. CSS ophalen en parseren — er wordt een CSSOM (CSS Object Model) opgebouwd.
4. Het bouwen van de renderboom — het combineren van DOM en CSSOM om stijlen en structuur te bepalen.
5. Lay-out (geometrieberekening) — de afmetingen en posities van de elementen op de pagina worden berekend.
6. Verven (renderen) — de browser tekent pixels op het scherm volgens de renderboom.

Als er JavaScript op de pagina is, kan dit de DOM en CSSOM wijzigen, wat leidt tot herhaalde rendering.

Op deze manier zet de browser de code van de pagina om in een visuele voorstelling voor de gebruiker.