Het renderingproces van een webpagina

Het renderingproces is wat je code omzet in een webpagina. Het leest de HTML, CSS en scripts, zet alles op de juiste plek, voegt de stijlen toe en zorgt ervoor dat alles werkt zoals bedoeld.

Geesteren, Twente

Er zijn verschillende versies en visualisaties van het renderingproces te vinden op het web, omdat de precieze structuur en samenstelling van de render tree afhankelijk zijn van diverse factoren, zoals de keuze van de browser, de HTML- en CSS-structuur, JavaScript-interacties en optimalisatieprocessen (zoals browserupdates en nieuwe functies).

In mijn versie heb ik ervoor gekozen om alles zo neutraal mogelijk te houden en alleen dieper in te gaan op de belangrijkste onderdelen.

Een diagram van de stappen in het renderingproces van een webpagina

Het renderingproces in detail

  1. HTML Laden
    • De browser haalt het HTML-bestand van de server op.
  2. HTML Parsen (parser = “vertaler” van code)
    • Dit is het lezen en het begrijpen van de ruwe HTML-code.
    • De parser leest het HTML-document en identificeert tags, attributen en hun relaties.
  3. DOM Opbouwen
    • Tijdens het verwerken van de HTML bouwt de browser de DOM (Document Object Model) op.
    • Het opbouwen van de DOM houdt in dat de browser de HTML-code van een webpagina leest en deze omzet in een boomstructuur.
    • De structuur vertoont alle elementen van de pagina (zoals tekst, afbeeldingen, links, etc.) en hun onderlinge relaties, zodat de browser weet wat op de pagina staat en hoe deze is georganiseerd.
    • Hoe duidelijker je HTML, des te sneller verwerkt de browser je pagina. Gebruik daarom altijd semantisch gestructureerde HTML
  4. CSS Laden
    • Externe CSS
      • Wanneer de HTML-parser CSS-linkjes tegenkomt, begint de browser CSS-bestanden te laden.
      • De browser haalt het bestand op, maar doet er nog niets mee.
    • Inline-CSS
      • Als de browser de <style>-tag tegenkomt in de <head>, zoals de inline CSS die WordPress tegenwoordig gebruikt, schakelt de browser over naar de CSS-parser om de inhoud binnen de <style>-tags te verwerken.
      • De browser breekt de CSS-code op in stukken (tokens) zoals selectors, properties, values, etc.
      • De parser combineert de tokens om er CSS-regels van te vormen.
      • De parser voegt de CSS-regels direct toe aan het CSS Object Model (CSSOM).
      • Na het verwerken van de <style>-inhoud gaat de browser verder met het parsen van de HTML.
      • Inline CSS krijgt vaak hogere prioriteit dan externe stylesheets.
  5. JavaScript Laden
    • Externe scripts ( syntax: <script src="file.js"></script> )
      • Browser ziet het src-attribuut en moet het bestand eerst downloaden.
      • Na het downloaden parseert de browser het script.
    • Inline scripts ( syntax: <script>console.log("Alo Alo");</script> )
      • De browser ziet de JavaScript-code direct in de HTML.
      • De browser voert het script meteen uit na het parsen.
  6. CSS Parsen
    • Zodra de browser de CSS-bestanden heeft geladen, leest en verwerkt deze de CSS-regels om te bepalen welke stijlen op welke elementen van toepassing zijn.
    • Vervolgens bouwt de browser het CSSOM (CSS Object Model) op, dat alle stijlen van de pagina bevat.
    • De browser verwerkt CSS parallel aan de verwerking van de HTML en de opbouw van de DOM.
  7. JavaScript Parsen en Uitvoeren
    • De browser leest de JavaScript-code en controleert op fouten.
    • De browser zet de code om naar een uitvoerbare vorm.
    • Na het parsen volgt meestal direct het uitvoeren van het script.
    • JavaScript kan veranderingen aanbrengen in zowel het DOM als het CSSOM.
    • Als de JavaScript-code wijzigingen aanbrengt in het DOM, voert de browser die wijzigingen onmiddellijk door voordat het parsen van de HTML en het opbouwen van het DOM verdergaan.
    • Dit komt omdat JavaScript de mogelijkheid heeft om elementen aan het DOM toe te voegen, te verwijderen of aan te passen door direct elementen te manipuleren.
    • De browser wacht dus met het verder opbouwen van het DOM totdat de JavaScript-code volledig is uitgevoerd.
  8. Render Tree Opbouwen
    • De browser combineert het DOM en het CSSOM om de Render Tree te creëren, waarin alleen de zichtbare elementen en hun stijlen worden opgenomen.
    • Zie het als ‘mise en place’; de browser treft voorbereidingen zonder elementen samen te stellen.
    • Verderop leg ik het opbouwen van de Render Tree verder uit.
  9. Layout Berekenen
    • De browser gebruikt de informatie uit de Render Tree (combinatie van DOM en CSSOM).
    • Voor elk zichtbaar element berekent de browser de exacte positie en grootte.
    • Dit omvat het bepalen van x- en y-coördinaten op het scherm.
    • De browser houdt rekening met:
      • De afmetingen van het viewport
      • De CSS-eigenschappen van elk element (zoals width, height, margin, padding)
      • De relatie tussen elementen, zoals child-elementen binnen een parent.
    • Het resultaat bestaat uit een set van coördinaten en afmetingen voor elk element.
  10. Pagina Schilderen ( Painting )
    • De browser zet de berekende layout om in pixels op het scherm.
    • Tijdens dit proces past de browser alle visuele eigenschappen van elk element toe:
      • Kleuren worden toegepast.
      • De browser rendert de tekst met de juiste lettertypen.
      • Afbeeldingen worden op de juiste plek en grootte weergegeven
      • De browser brengt andere visuele stijlen aan, zoals borders, schaduwen en gradients.
    • De browser voert dit proces uit voor elk element in de volgorde bepaald door de stacking context.
    • Een stacking context wordt gecreëerd door bepaalde CSS-eigenschappen, zoals position (met waarden anders dan static), z-index, en opacity (lager dan 1).
    • Elke stacking context werkt onafhankelijk; elementen binnen een context kunnen niet “buiten” hun eigen context boven of onder andere elementen uit een andere context komen te liggen.
    • Het resultaat is een reeks van ‘paint records’ die beschrijven hoe elk deel van de pagina moet worden weergegeven.
  11. Compositing
    • Dit proces voegt de verschillende painting-lagen samen tot het uiteindelijke beeld dat de browser op het scherm weergeeft.
    • Het proces bepaalt hoe de lagen bovenop elkaar worden geplaatst en hoe ze met elkaar communiceren.
  12. Weergave op Scherm
    • De browser toont het resultaat op het scherm van de gebruiker.

Dit renderingproces verloopt niet altijd stap voor stap. Moderne browsers gebruiken slimme trucs, zoals het stukje bij beetje laden van de pagina en het asynchroon verwerken van onderdelen, zodat je de pagina zo snel mogelijk ziet.

En de vraag die altijd komt; wat is de Render Tree?

De Render Tree is de basis die de browser gebruikt om te bepalen hoe de layout van de pagina eruit moet zien en om alle elementen op het scherm te tekenen (ook wel “painting” genoemd). Het geeft precies aan in welke volgorde en op welke manier elk element wordt weergegeven.

Hoe wordt de Render Tree opgebouwd?

Een kale kerstboom is HTML, CSS is de boom versiering en de cadeaus. De render tree is een opgetuigde kerstboom met de cadeaus eronder. JavaScript is de kat die alles nog kan veranderen.

De browser combineert de HTML-structuur (DOM) met de CSS-stijlen (CSSOM) om de Render Tree te maken. Hierbij worden alleen de zichtbare elementen opgenomen; elementen zoals de <head> of onderdelen met display: none; worden overgeslagen, omdat deze geen visuele invloed hebben op de pagina. Elementen met visibility: hidden; blijven in de Render Tree en behouden hun ruimte, maar zijn onzichtbaar.

Wat zit er in de Render Tree?

De Render Tree bestaat uit elementen die elk een visueel onderdeel van de pagina vertegenwoordigen, zoals knoppen, tekstblokken of afbeeldingen. Elk element bevat gedetailleerde informatie over de grootte, positie, kleuren, marges en andere visuele eigenschappen.

Kan de Render Tree veranderen?

Ja, de Render Tree is dynamisch. Wanneer JavaScript iets wijzigt in de HTML of CSS van de pagina, wordt de Render Tree automatisch bijgewerkt om deze veranderingen door te voeren. Op deze manier blijft de pagina altijd actueel en correct weergegeven.

Wil je hier meer over weten of een visueel beeld krijgen van wat ik bedoel? Lees dan het artikel op web.dev over de opbouw van de Render Tree.

Optimalisatie met de Render Tree

Browsers gebruiken de Render Tree om de pagina zo efficiënt mogelijk te tekenen. Als alleen een klein deel van de pagina verandert, tekent de browser alleen dat deel opnieuw, in plaats van de hele pagina. Dit zorgt voor snellere prestaties en een vloeiende weergave.

De Render Tree is dus essentieel voor een snelle en nauwkeurige weergave van webpagina’s. Het zorgt ervoor dat alles wat je op een webpagina ziet klopt en soepel laadt, zonder onnodige vertragingen.

Als ontwikkelaar is het essentieel om te begrijpen hoe het renderingproces werkt, zodat je de snelheid, prestaties en gebruikerservaring van je websites kunt optimaliseren. Door deze kennis toe te passen, maak je niet alleen efficiëntere pagina’s, maar vergroot je ook de tevredenheid van je gebruikers.