Ce que fait le navigateur

Bien plus qu'un afficheur de pages

On voit le navigateur comme une fenêtre sur le Web. Mais derrière cette interface simple se cache une machinerie complexe qui s'exécute en quelques centaines de millisecondes. Voyons ce qui se passe depuis la réception du HTML jusqu'à l'affichage à l'écran.

💡

Analogie : Le navigateur, c'est comme un chef cuisinier. Il reçoit la recette (HTML), fait la liste des ingrédients (CSS, JS, images), les prépare dans l'ordre, puis dresse le plat (rendu visuel). Chaque étape dépend de la précédente.

Vue d'ensemble du processus

// Pipeline de rendu d'une page web

  1. Réception HTML  ←── réponse HTTP du serveur
         │
         ▼
  2. Parsing HTML    ←── lecture du texte, construction du DOM
         │
         ├──── découverte de CSS  ──▶  téléchargement + parsing CSSOM
         ├──── découverte de JS   ──▶  téléchargement + exécution
         └──── découverte images  ──▶  téléchargement (asynchrone)
         │
         ▼
  3. Render Tree     ←── DOM + CSSOM fusionnés
         │
         ▼
  4. Layout          ←── calcul des positions et dimensions
         │
         ▼
  5. Paint           ←── dessin des pixels
         │
         ▼
  6. Composite       ←── assemblage des couches → écran !

Étape 1 : Parsing HTML → DOM

Le navigateur lit le HTML reçu du serveur de haut en bas, caractère par caractère. Il transforme ce texte en une structure arborescente : le DOM (Document Object Model).

  // HTML reçu
  <html>
    <body>
      <h1>Bonjour</h1>
      <p>Le Web</p>
    </body>
  </html>

  // DOM résultant (arbre)
  Document
  └── html
      └── body
          ├── h1  "Bonjour"
          └── p   "Le Web"

Le DOM est vivant : JavaScript peut le modifier après coup pour changer ce qu'on voit à l'écran sans recharger la page.

Étape 2 : Parsing CSS → CSSOM

En parallèle, le navigateur télécharge et analyse les fichiers CSS. Il construit le CSSOM (CSS Object Model) — un arbre des règles de style.

Attention : le CSS est bloquant. Le navigateur ne peut pas afficher la page tant que tout le CSS n'est pas chargé et parsé. C'est pour ça que les CSS doivent être dans le <head> et le plus légers possible.

⚠️

Le JavaScript est encore plus bloquant : par défaut, quand le parser rencontre un <script>, il s'arrête, attend le téléchargement et l'exécution du script, puis reprend. C'est pour ça qu'on met les scripts à la fin du <body> ou avec les attributs defer ou async.

Étape 3-6 : Du Render Tree à l'écran

Le navigateur fusionne DOM et CSSOM pour créer le Render Tree — uniquement les éléments visibles avec leurs styles. Puis :

Layout : calcule la position exacte et la taille de chaque élément en pixels.
Paint : dessine les pixels (couleurs, bordures, textes, ombres…).
Composite : assemble les couches (certains éléments sont sur des couches séparées pour les animations).

  // Ce que fait le Render Tree

  DOM :           CSSOM :           Render Tree :
  <h1>Titre       h1 { color: blue  <h1> bleu, 24px
  <p> Texte       p { display:none  <p> ignoré (caché !)
  <span> Info     span { color:red  <span> rouge, 14px

Les DevTools : voir tout ça en action

Dans n'importe quel navigateur, appuie sur F12 pour ouvrir les DevTools. Tu peux y voir :

Elements : le DOM en temps réel, modifiable à la volée
Network : toutes les requêtes HTTP, leur durée, leur taille
Performance : le pipeline de rendu visualisé frame par frame
Console : les messages JavaScript et les erreurs
Sources : les fichiers CSS et JS chargés

✅

Dans l'onglet Network, active "Disable cache" et recharge la page. Tu verras exactement combien de fichiers sont téléchargés, dans quel ordre, et combien de temps chacun prend. C'est fascinant pour n'importe quel site !

// À retenir

Le navigateur transforme le HTML en DOM (arbre) et le CSS en CSSOM.
DOM + CSSOM = Render Tree → Layout → Paint → Composite → affichage.
Le CSS est bloquant : la page n'apparaît pas tant que le CSS n'est pas chargé.
Le JavaScript bloque le parsing HTML par défaut — utiliser defer ou async.
Les DevTools (F12) permettent d'observer tout ce processus en temps réel.