Hoe verwerkt de browser de webpagina?

URL-analyse: De browser analyseert de URL om het protocol, de domeinnaam en het pad naar de bron te bepalen.
DNS-verzoek: Als de domeinnaam nog niet in de lokale cache staat, stuurt de browser een DNS-verzoek om het IP-adres van de server te verkrijgen.
TCP-verbinding opzetten: De browser stelt een TCP-verbinding op met de server met behulp van het verkregen IP-adres.
HTTP-verzoek: De browser stuurt een HTTP-verzoek naar de server, waarin de gewenste webpagina wordt opgevraagd.
Ontvangst van HTTP-antwoorden: De server verwerkt het verzoek en stuurt een HTTP-antwoords dat de HTML-code, CSS, JavaScript en andere bronnen bevat.
HTML-analyse: De browser begint de ontvangen HTML te parsen en maakt een DOM-boom (Document Object Model).
Bronnen laden: Tijdens het parsen van HTML detecteert de browser links naar andere bronnen (CSS, JS, afbeeldingen) en begint deze vaak parallel te laden.
CSS-analyse: De browser analyseert de CSS en maakt een CSSOM-boom (CSS Object Model).
Constructie van de renderboom (Render Tree): Door DOM en CSSOM te combineren, maakt de browser een renderboom die alleen de zichtbare knooppunten en hun stijlen bevat.
Lay-out: De browser berekent de geometrische afmetingen en de positie van elk element op de pagina.
Tekenen: De browser tekent pixels voor elk element op het scherm op basis van de renderboom en de lay-outresultaten.
Compositing: Als de pagina lagen bevat (bijvoorbeeld vanwege CSS-eigenschappen zoals transform of opacity), combineert de browser deze lagen om de uiteindelijke afbeelding weer te geven.
JavaScript-verwerking: Bij het detecteren van <script>-tags of inline-scripts analyseert, compileert en voert de browser JavaScript uit. JavaScript kan de DOM, CSSOM wijzigen en invloed hebben op de lay-out- en tekenfasen, wat kan leiden tot herhaling van deze stappen.