Comment se charge une page web?

L'utilisateur saisit une URL dans la barre d'adresse du navigateur ou clique sur un lien.
Analyse de l'URL: Le navigateur analyse l'URL pour déterminer le protocole, le domaine, le port et le chemin.
Recherche d'adresse IP: Le navigateur vérifie le cache DNS, puis le cache du système d'exploitation, puis le cache du routeur. Si l'adresse n'est pas trouvée localement, une requête est envoyée au serveur DNS pour obtenir l'adresse IP du nom de domaine.
Établissement de la connexion TCP (Handshake): Le navigateur établit une connexion TCP avec le serveur en utilisant l'adresse IP obtenue (poignée de main en trois étapes : SYN -> SYN-ACK -> ACK).
Envoi de la requête HTTP: Le navigateur envoie une requête HTTP (généralement GET) au serveur en indiquant la ressource demandée (chemin), les en-têtes (User-Agent, Accept-Encoding, Cookie, etc.) et le corps de la requête (si présent).
```
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  
```
Traitement de la requête par le serveur: Le serveur reçoit la requête, la traite (par exemple, exécute des scripts côté serveur) et génère une réponse HTTP.
Envoi de la réponse HTTP: Le serveur renvoie la réponse HTTP au navigateur. La réponse inclut le code de statut (par exemple, 200 OK), les en-têtes (Content-Type, Content-Length, Cache-Control, etc.) et le corps de la réponse (contenu de la ressource demandée, par exemple, un fichier HTML).
```
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>  
```
Analyse du HTML et construction du DOM: Le navigateur commence à recevoir le code HTML et à l'analyser, créant un modèle d'objet du document (DOM - Document Object Model) en mémoire. Le DOM représente un arbre d'éléments HTML.
Chargement et traitement des ressources: Pendant l'analyse du HTML, le navigateur trouve des liens vers d'autres ressources (CSS, JavaScript, images, polices, etc.). Pour chaque ressource, les étapes 3-7 sont répétées (recherche d'IP, connexion TCP (si nécessaire), requête/réponse HTTP). Le chargement de ces ressources peut se faire en parallèle (limité par le nombre de connexions simultanées).
Construction du CSSOM: Le navigateur analyse les fichiers CSS et les blocs <style> dans HTML, créant un modèle d'objet CSS (CSSOM - CSS Object Model). Le CSSOM représente les styles applicables aux éléments de la page.
Construction de l'arbre de rendu: Le navigateur combine le DOM et le CSSOM pour construire l'arbre de rendu (Render Tree). L'arbre de rendu ne contient que les éléments visibles de la page et leurs styles. Les éléments avec display: none ne sont pas inclus.
Layout (Reflow): Le navigateur calcule la position et la taille exactes de chaque élément dans la mise en page, en se basant sur l'arbre de rendu, les dimensions de la fenêtre de visualisation et les styles.
Peinture (Repaint): Le navigateur dessine chaque élément à l'écran dans les positions calculées et avec les styles appliqués. Cela se produit sur des couches.
Composition: Le navigateur combine les couches dessinées en l'image finale affichée à l'écran de l'utilisateur.
Exécution de JavaScript: Au fur et à mesure du chargement et de l'analyse des scripts, le code JavaScript est exécuté. L'exécution de JavaScript peut influencer le DOM et le CSSOM, provoquant des étapes répétées de Layout et de Peinture (Relayout/Repaint).

Étapes clés pour l'affichage du contenu:

DOMContentLoaded: L'événement se déclenche lorsque le navigateur a complètement chargé et analysé le document HTML et construit l'arbre DOM, mais attend le chargement des feuilles de style, images et sous-frames.
Load: L'événement se déclenche lorsque toute la page, y compris les images, scripts, styles et autres ressources, est complètement chargée.