Rendu d’une page : analyse, DOM, CSSOM, mise en page et peinture
Découvrez ce que le navigateur fait des octets HTML et CSS : construire le DOM et le CSSOM, calculer la mise en page et peindre les pixels.
Rendu d’une page : analyse, DOM, CSSOM, mise en page et peinture est une leçon Frontend Academy gratuite sur CoddyKit. Ceci est la leçon 3 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Frontend Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Frontend Academy comprend 4 leçons au total.
Des octets aux pixels
Lorsque le navigateur reçoit les octets HTML du serveur, un processus en plusieurs étapes les transforme en pixels affichés à l’écran. Connaître cette chaîne vous aide à optimiser les performances et à comprendre ce qui provoque les problèmes d’affichage.
Étape 1 — Analyse de HTML : construction du DOM
L’analyseur HTML du navigateur lit le flux d’octets et construit le modèle objet de document (DOM) : un arbre de nœuds représentant chaque élément HTML, nœud de texte et commentaire du document.
<!-- This HTML... -->
<div>
<p>Hello</p>
</div>
// ...becomes a DOM tree:
// Document
// └── html
// └── body
// └── div
// └── p
// └── 'Hello'Étape 2 — Analyse de CSS : construction du CSSOM
Simultanément, les octets CSS sont analysés pour construire le modèle objet CSS (CSSOM) : un arbre de règles de style. CSS bloque le rendu : le navigateur ne dessine pas les pixels tant qu’il n’a pas calculé les styles du contenu visible.
Étape 3 — L’arbre de rendu
Le navigateur combine le DOM et le CSSOM pour former l’arbre de rendu. Seuls les nœuds visibles sont inclus : les éléments avec display:none sont exclus. Chaque nœud de l’arbre de rendu contient le style calculé avec lequel il sera dessiné.
Étape 4 — Mise en page (recalcul)
La mise en page calcule la position et la taille exactes de chaque nœud de l’arbre de rendu à l’aide du modèle de boîte et de la largeur de la fenêtre d’affichage. Cette opération est également appelée recalcul de la mise en page. Elle est coûteuse : évitez de la déclencher à répétition dans JavaScript.
Étape 5 — Peinture
La peinture transforme la mise en page en pixels réels à l’écran. Le navigateur dessine les arrière-plans, les bordures, le texte et les images couche par couche. Certains éléments créent leurs propres couches de composition pour un rendu accéléré par le GPU.
Étape 6 — Composition
Le compositeur du navigateur combine les couches peintes pour former l’image finale et l’envoie à l’écran. Utiliser transform et opacity pour les animations permet au compositeur de les exécuter sur le GPU, en évitant entièrement la mise en page et la peinture.
Qu’est-ce qui bloque le rendu ?
CSS placé dans le <head> bloque le rendu. JavaScript bloque par défaut à la fois l’analyseur et le rendu. Utilisez defer sur les balises de script pour analyser le JS après HTML sans bloquer le rendu.
<script src="app.js" defer></script>Chemin critique du rendu
Le chemin critique du rendu est la séquence qui va de la réception des octets HTML à l’affichage du premier pixel. L’optimiser consiste à réduire le nombre et la taille des ressources qui bloquent le rendu et à différer le JS et le CSS non critiques.
Recalcul de la mise en page ou nouvelle peinture
Modifier des propriétés de mise en page (largeur, marge, position) déclenche un recalcul de la mise en page et une nouvelle peinture. Modifier des propriétés uniquement visuelles (couleur, arrière-plan) déclenche seulement une nouvelle peinture. Modifier la transformation ou l’opacité déclenche uniquement une composition. Privilégiez l’opération la moins coûteuse.
DevTools : observer la chronologie de la peinture
Dans Chrome DevTools, ouvrez le panneau Performances, enregistrez le chargement d’une page et examinez le diagramme en cascade. Vous verrez les événements verts de peinture et pourrez identifier les éléments qui provoquent des mises en page coûteuses.
Vérification rapide
Quelle étape calcule la taille et la position exactes de chaque élément de la page ?
Récapitulatif : la chaîne de rendu
HTML → DOM → CSSOM → arbre de rendu → mise en page → peinture → composition. Chaque étape alimente la suivante. Optimiser le chemin critique du rendu consiste à raccourcir cette chaîne afin que le premier contenu visible apparaisse aussi rapidement que possible.
Questions Fréquemment Posées
La leçon « Rendu d’une page : analyse, DOM, CSSOM, mise en page et peinture » est-elle gratuite ?
Oui — le texte complet de « Rendu d’une page : analyse, DOM, CSSOM, mise en page et peinture » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Frontend Academy, passe à CoddyKit PRO. Le cours Frontend Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Rendu d’une page : analyse, DOM, CSSOM, mise en page et peinture » ?
Découvrez ce que le navigateur fait des octets HTML et CSS : construire le DOM et le CSSOM, calculer la mise en page et peindre les pixels. Tu pratiques Frontend Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Frontend Academy ?
Aucune expérience préalable n'est requise. Frontend Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 3 sur 4.
Combien de temps prend la leçon « Rendu d’une page : analyse, DOM, CSSOM, mise en page et peinture » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Frontend Academy ?
Oui. Chaque leçon Frontend Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- DNS et HTTP dans les navigateurs : cycle de vie d’une requête
- HTML, CSS et JavaScript : rôle de chaque couche
- Rendu d’une page : analyse, DOM, CSSOM, mise en page et peinture
- Outils de développement : ouvrir et utiliser DevTools