Le rendu du navigateur
Du HTML aux pixels à l'écran
La requête
Quand vous tapez une URL et appuyez sur Entrée, votre navigateur envoie une requête HTTP à un serveur web. Le serveur répond avec un fichier HTML — un simple document texte contenant des balises. Mais comment le navigateur transforme-t-il ce texte en page visuelle et interactive ?
Pipeline de rendu du navigateur ────────────────────────────── 1. Parser le HTML → arbre DOM 2. Parser le CSS → arbre CSSOM 3. Combiner → arbre de rendu 4. Layout → calculer les positions 5. Paint → dessiner les pixels 6. Composite → composition des couches ────────────────────────────── Tout cela en quelques millisecondes.
Parsing HTML
Le navigateur lit le HTML octet par octet et construit le DOM (Document Object Model) — une structure en arbre où chaque élément HTML devient un nœud.
<html>
<head><title>Ma Page</title></head>
<body>
<h1>Bonjour</h1>
<p>Monde</p>
</body>
</html> Arbre DOM :
document
└── html
├── head
│ └── title
│ └── "Ma Page"
└── body
├── h1
│ └── "Bonjour"
└── p
└── "Monde"Construction du CSSOM
Le navigateur parse les fichiers CSS et construit le CSSOM (CSS Object Model) — un autre arbre qui représente tous les styles et comment ils se cascadent et s'héritent.
Le CSSOM doit être entièrement construit avant que le navigateur puisse procéder au rendu. C'est pourquoi le CSS est dit bloquant pour le rendu.
L'arbre de rendu
Le navigateur combine le DOM et le CSSOM en un arbre de rendu. Cet arbre ne contient que les éléments visibles — les nœuds avec display: none sont exclus.
Arbre de rendu (DOM + CSSOM) :
──────────────────────────
body { font: sans-serif, color: #333 }
├── h1 { font-size: 2rem, color: #1a1a2e }
│ └── "Bonjour"
└── p { line-height: 1.6, color: #333 }
└── "Monde"
NON inclus :
✗ <head>, <title> (non visuels)
✗ <script> (non visuels)
✗ display: none (explicitement cachés)Layout & Paint
Le Layout (aussi appelé « reflow ») calcule la position et taille exactes de chaque élément. Le Paint remplit chaque pixel : le texte est rastérisé, les couleurs appliquées, les bordures dessinées.
Astuce performance
Modifier les propriétés de layout (width, height, margin) déclenche reflow + repaint. Modifier transform ou opacity ne déclenche que la composition — le chemin le plus rapide.
Résumé
DOM + CSSOM = Arbre de rendu
Le HTML crée le DOM, le CSS crée le CSSOM, et ensemble ils forment l'arbre de rendu contenant uniquement les éléments visibles.
Le CSS est bloquant pour le rendu
Le navigateur ne peut rien afficher tant que tout le CSS n'est pas parsé. Gardez votre CSS léger et chargez les styles critiques en premier.
Minimisez les reflows
Préférez transform et opacity pour les animations — ils sautent le layout et le paint.