Hoe verwerkt de browser de webpagina?

Het verwerkingsproces van een webpagina door de browser kan in verschillende fasen worden onderverdeeld:

1. Verzoek en resource ophalen:

   • De gebruiker voert de URL in de adresbalk in of klikt op een link.
   • De browser stuurt een HTTP-verzoek naar de server.
   • De server verwerkt het verzoek en stuurt een antwoord terug, meestal een HTML-document.

2. Syntactische analyse (Parsing):

   • De browser ontvangt het HTML-document in de vorm van bytes.
   • Deze bytes worden gedecodeerd in tekens volgens de opgegeven codering.
   • De HTML-parser analyseert het document teken voor teken en bouwt de DOM (Document Object Model) boom. De DOM vertegenwoordigt de logische structuur van het document.
   • Bij het detecteren van <link> (voor CSS) of <script> (voor JavaScript) tags, begint de browser deze bronnen parallel aan de HTML-analyse te downloaden.

3. Constructie van de CSSOM:

   • De CSS-parser analyseert de CSS-regels uit <style>, <link> en inline stijlen.
   • Op basis hiervan wordt de CSSOM (CSS Object Model) boom gebouwd, die alle stijlen voor elk element op de pagina bevat.

4. Constructie van de renderboom (Render Tree):

   • De Render Tree combineert DOM en CSSOM. Het bevat alleen de elementen die op de pagina worden weergegeven en hun bijbehorende stijlen.
   • Elementen met de CSS-regel display: none; worden niet opgenomen in de Render Tree.

5. Lay-out (Reflow):

   • De browser berekent de exacte geometrische afmetingen en posities van elk element op basis van de Render Tree. Dit proces wordt Lay-out of Reflow genoemd.
   • Lay-out vindt plaats bij de eerste constructie van de Render Tree en ook wanneer het venster wordt gewijzigd, elementen worden toegevoegd of verwijderd, of hun stijlen worden gewijzigd.

6. Schilderen (Painting / Repaint):

   • De browser tekent elk element op het scherm met behulp van de informatie uit de Render Tree en de resultaten van de Lay-out.
   • Schilderen kan ook plaatsvinden bij wijzigingen in de zichtbare eigenschappen van het element, zoals kleur, achtergrond, transparantie, zonder de geometrie te wijzigen (dit wordt Repaint genoemd).

7. Samenstellen (Compositing):

   • De te tekenen elementen kunnen worden gegroepeerd in verschillende lagen om de rendering en animatie te optimaliseren.
   • Deze lagen worden vervolgens samengevoegd om de uiteindelijke pagina op het scherm weer te geven.

8. Uitvoering van scripts:

   • Wanneer de HTML-parser de <script>-tag bereikt, wordt de HTML-analyse onderbroken (standaard), en downloadt, analyseert en voert de browser de JavaScript-code uit.
   • JavaScript kan DOM en CSSOM wijzigen, wat kan leiden tot herhaalde Lay-out- en Schilderstappen.
   • De attributen async en defer voor de <script>-tag beïnvloeden de volgorde en het tijdstip van uitvoering van scripts, waardoor de HTML-analyse kan worden voortgezet.

Hier is een ruwe visualisatie van de stroom:

HTTP-verzoek
↓
HTML-bits
↓
HTML-parser
→ CSS-parser (parallel)
    ↓           ↓
    DOM-boom  CSSOM-boom
          ↓
     Render-boom
          ↓
        Lay-out
          ↓
       Schilderen
          ↓
     Compositing
          ↓
   Schermweergave

De uitvoering van JavaScript kan op verschillende punten worden onderbroken, wat leidt tot herhaalde stappen:

HTML-parser + `<script>`-tag
↓
Pauzeer HTML-analyse
↓
Download script
↓
Parse script
↓
Voer script uit
↓
(Mogelijk DOM/CSSOM wijzigen → Trigger Lay-out/Schilderen)
↓
Hervat HTML-analyse

Het begrijpen van dit proces is belangrijk voor het optimaliseren van de prestaties van webpagina's.