Du HTML aux pixels
DOM, CSSOM, render tree, layout et paint.
Objectifs
À la fin de cette leçon, vous saurez :
- décrire la chaîne de rendu complète du navigateur ;
- distinguer DOM, CSSOM et render tree ;
- expliquer layout, paint et leur coût.
La chaîne de rendu
Quand le navigateur reçoit votre HTML, il enchaîne :
HTML ──parsing──→ DOM
CSS ──parsing──→ CSSOM
↓
RENDER TREE (éléments visibles + leurs styles)
↓
LAYOUT (géométrie : positions, tailles)
↓
PAINT (pixels dessinés, couches rasterisées)
↓
COMPOSITE (assemblage final à l'écran)
Le DOM : votre HTML en objets
Le DOM (Document Object Model) est la représentation mémoire du document : un arbre d'objets que JavaScript peut lire et modifier. C'est LUI que vous manipulerez au chapitre suivant — pas les fichiers.
document
└── html
├── head ── title
└── body
├── h1 "Mon site"
└── p "Bonjour"
Deux conséquences pratiques :
- une balise mal fermée produit quand même un DOM (le parseur corrige) ;
- le JavaScript modifie le DOM, puis le navigateur recalcule l'affichage.
Le CSSOM et le render tree
Le CSSOM est l'équivalent pour les styles : chaque règle rangée selon sa spécificité. Le render tree croise les deux arbres : il ne contient que ce qui se dessine (<head> n'y figure jamais ; un élément en display: none non plus).
Layout et paint : où ça coûte
- Layout (reflow) : calculer positions et tailles. Il redémarre dès qu'une dimension change.
- Paint (repaint) : remplir les pixels. Redémarre quand couleurs/ombres changent sans bouger la géométrie.
changer une couleur → repaint seul (peu coûteux)
changer width/padding → layout + paint (plus coûteux)
redimensionner la fenêtre → layout global + repaint (le plus cher)
C'est pourquoi animer transform est recommandé plutôt qu'animer des dimensions : transform ne déclenche ni layout ni paint.
Exercice
- Récitez la chaîne complète dans l'ordre, sans regarder.
- Pour chaque modification, dites quelles étapes se relancent :
a. changer
colord'un paragraphe ; b. ajouter un padding sur toutes les sections ; c. masquer un élément avec display:none. - Ouvrez DevTools → onglet Performance, rechargez votre CV : repérez le moment du layout.
Résumé
- Parsing → DOM/CSSOM → render tree → layout → paint → composite.
- Le DOM est l'arbre vivant que JS modifiera.
- Layout = géométrie (cher), paint = pixels ; minimiser les relances est un réflexe de performance.
Correction disponibleCherchez d’abord par vous-même.Voir la correction
Correction
Réponses détaillées
2a. Paint uniquement : la géométrie ne bouge pas.
2b. Layout + paint : le padding change les tailles, donc tout ce qui suit se recalcule.
2c. Layout + paint : l'élément quitte le render tree, ses voisins se replacent. (À comparer avec visibility: hidden, qui garde la place : repaint seul.)