Hoe wordt een webpagina geladen?

De gebruiker voert een URL in de adresbalk van de browser in of klikt op een link.
URL parsing: De browser analyseert de URL om het protocol, domein, poort en pad te bepalen.
Zoeken naar IP-adres: De browser controleert de DNS-cache, vervolgens de cache van het besturingssysteem, daarna de cache van de router. Als het adres niet lokaal wordt gevonden, wordt een verzoek gestuurd naar de DNS-server om het IP-adres van de domeinnaam te verkrijgen.
TCP-verbinding tot stand brengen (Handshake): De browser stelt een TCP-verbinding in met de server met behulp van het verkregen IP-adres (drieweg-handdruk: SYN -> SYN-ACK -> ACK).
HTTP-verzoek verzenden: De browser verzendt een HTTP-verzoek (meestal GET) naar de server met vermelding van de gevraagde bron (pad), headers (User-Agent, Accept-Encoding, Cookie, enz.) en de body van het verzoek (indien aanwezig).
```
GET /index.html HTTP/1.1  
Host: example.com  
User-Agent: Mozilla/5.0 ...  
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8  
```
Verwerking van het verzoek door de server: De server ontvangt het verzoek, verwerkt het (bijvoorbeeld, voert server-side scripts uit) en genereert een HTTP-antwoor
HTTP-antwoor verzenden: De server stuurt het HTTP-antwoor terug naar de browser. Het antwoord bevat de statuscode (bijvoorbeeld, 200 OK), headers (Content-Type, Content-Length, Cache-Control, enz.) en de body van het antwoord (de inhoud van de gevraagde bron, bijvoorbeeld een HTML-bestand).
```
HTTP/1.1 200 OK  
Content-Type: text/html; charset=UTF-8  
Content-Length: 12345  
Cache-Control: max-age=3600  

<!DOCTYPE html>  
<html>  
<head>...</head>  
<body>...</body>  
</html>  
```
HTML parseren en DOM opbouwen: De browser begint de HTML-code te ontvangen en te parseren, en creëert een documentobjectmodel (DOM - Document Object Model) in het geheugen. Het DOM vertegenwoordigt een boom van HTML-elementen.
Laden en verwerken van bronnen: Tijdens het parseren van HTML, vindt de browser links naar andere bronnen (CSS, JavaScript, afbeeldingen, lettertypen, enz.). Voor elke bron worden stappen 3-7 herhaald (IP-zoektocht, TCP-verbinding (indien nodig), HTTP-verzoek/-antwoord). Het laden van deze bronnen kan parallel plaatsvinden (beperkt door het aantal gelijktijdige verbindingen).
Bouwen van CSSOM: De browser analyseert CSS-bestanden en <style>-blokken in HTML, en creëert een CSS-objectmodel (CSSOM - CSS Object Model). CSSOM vertegenwoordigt de stijlen die op de elementen op de pagina kunnen worden toegepast.
Bouwen van de renderboom: De browser combineert DOM en CSSOM om de renderboom (Render Tree) te bouwen. De renderboom bevat alleen de zichtbare elementen van de pagina en hun stijlen. Elementen met display: none worden niet opgenomen.
Layout (Reflow): De browser berekent de exacte positie en grootte van elk element op basis van de renderboom, de afmetingen van het venster en de stijlen.
Schilderen (Repaint): De browser tekent elk element op het scherm op de berekende posities en met de toegepaste stijlen. Dit gebeurt op lagen.
Samenstellen: De browser combineert de getekende lagen tot de uiteindelijke afbeelding die op het scherm van de gebruiker wordt weergegeven.
Uitvoeren van JavaScript: Terwijl scripts worden geladen en geanalyseerd, wordt de JavaScript-code uitgevoerd. Het uitvoeren van JavaScript kan invloed hebben op DOM en CSSOM, en herhaalde stappen van Layout en Painting (Reflow/Repaint) veroorzaken.

Belangrijke stappen voor het weergeven van inhoud:

DOMContentLoaded: Het evenement wordt geactiveerd wanneer de browser het HTML-document volledig heeft geladen en geanalyseerd en de DOM-structuur heeft opgebouwd, maar wacht op het laden van stylesheets, afbeeldingen en subframes.
Load: Het evenement wordt geactiveerd wanneer de hele pagina, inclusief afbeeldingen, scripts, stijlen en andere bronnen, volledig is geladen.