Comment un navigateur Web rend-il un document HTML

Le navigateur analyse HTML dans l'arbre Dom progressivement lorsque les octets sont reçus. 2. 3. CSS est analysé dans le CSSOM, un arbre de règles de style qui, combinés avec le DOM, forme l'arbre de rendu. 4. L'arbre de rendu est construit en utilisant uniquement des éléments visibles et leurs styles calculés. 5. La disposition (ou reflux) calcule la position et la taille exactes de chaque élément à partir de la racine. 6. La peinture convertit l'arbre de rendu en données de pixels en dessinant du texte, des couleurs, des frontières et d'autres éléments visuels sur les couches. 7. Le compositing combine ces couches dans le bon ordre pour produire efficacement l'image d'écran finale. L'ensemble du pipeline de rendu - comparaison, construire des arbres, la disposition, la peinture et la composition - se présente en millisecondes et répète les modifications, permettant des pages Web rapides et interactives.

Lorsque vous ouvrez une page Web, votre navigateur passe par une série d'étapes pour transformer le HTML brut (et des ressources connexes comme CSS et JavaScript) en une page interactive entièrement rendue. Ce processus est appelé le pipeline de rendu . Voici comment un navigateur Web rend un document HTML:

1. Panse Html dans le DOM

La première étape consiste à lire le fichier HTML et à la convertir en format structuré avec lequel le navigateur peut fonctionner: le modèle d'objet de document (DOM) .

• Le navigateur lit l'octet HTML par octet et l' analyse en jetons (comme <div> , <code> , attributs, texte).
• Ces jetons sont ensuite transformés en nœuds , qui sont organisés en une structure d'arbre appelée arbre Dom .
• Le DOM représente la structure et le contenu du document et est accessible via JavaScript.

Remarque : le DOM est construit progressivement. Dès que les morceaux de HTML sont téléchargés, l'analyse commence - il n'attend pas l'intégralité du fichier.



---

2. Chargement des ressources externes

Tout en analysant HTML, le navigateur rencontre des références aux ressources externes:

• Fichiers CSS ( <link rel="stylesheet"> )
• Fichiers javascript ( <script src="..."></script> )
• Images, polices, etc.

Ceux-ci sont téléchargés de manière asynchrone (en parallèle), mais:


• CSS est bloqué par rendu : le navigateur attend de rendre jusqu'à ce que CSS soit analysé car les styles affectent la disposition.
• JavaScript est le blocage de l'analyse (par défaut) : Lorsque l'analyseur frappe une balise <script></script> régulière, il fait une pause html pour récupérer et exécuter le script - à moins que le script utilise async ou defer .

---

3. Analyser CSS et construire le CSSOM

Le navigateur analyse CSS (à partir de fichiers externes, de balises <style></style> ou de styles en ligne) dans le modèle d'objet CSS (CSSOM) .

• Le CSSOM est une structure en forme d'arbre qui mappe les règles CSS aux éléments.
• Contrairement au DOM, le CSSOM n'est pas public , mais il détermine comment les éléments sont stylisés.
• Il bloque également le rendu , ce qui signifie que le navigateur ne pesera rien tant que le CSSOM n'est pas prêt.

Ensemble, le DOM et le CSSOM forment un arbre de rendu .

---

4. Construire l'arbre de rendu

Le navigateur combine le DOM et le CSSOM pour créer l' arbre de rendu :

• Ne comprend que des éléments visibles (par exemple, exclut display: none ou <script></script> , <meta> ).
• Chaque nœud de l'arbre de rendu a calculé les styles (après avoir résolu l'héritage, la cascade, etc.).
• Cet arbre représente ce qui sera réellement peint à l'écran.

---

5. Disposition (reflux)

Maintenant que le navigateur sait quels éléments rendent et leurs styles, il calcule:

• Où chaque élément doit apparaître sur la page (position, taille).
• Ce processus est appelé mise en page ou reflours .
• Il commence à la racine de l'arborescence de rendu (généralement l'élément ) et calcule récursivement la géométrie pour chaque nœud.

Cette étape est coûteuse en calcul , en particulier pour les dispositions complexes.

---

6. Peinture (rasterisation)

Après la disposition, le navigateur peint les pixels:

• L'arbre de rendu est décomposé en couches .
• Chaque couche est peinte dans un bitmap (une image basée sur des pixels) en mémoire.
• Cela implique de dessiner du texte, des couleurs, des bordures, des ombres, etc.
• Les navigateurs modernes peuvent diviser le contenu en plusieurs couches pour les performances (par exemple, en utilisant will-change ou transform ).

---

7. Compositer

Enfin, le navigateur composte les couches peintes:

• Les calques sont dessinés dans l'ordre correct pour former l'image de l'écran finale.
• Cette étape gère les éléments qui se chevauchent, la transparence, l'index z, etc.
• Il est optimisé pour que seules les couches modifiées soient repeintes ou recomposées (par exemple, pendant les animations).

---

Bonus: l'impact de JavaScript

JavaScript peut interrompre ou modifier tout ce processus:

• Les scripts peuvent lire ou modifier le DOM et le CSSOM.
• Les méthodes d'appel comme window.getComputedStyle() ou offsetHeight obligent le navigateur à effectuer une disposition de manière synchrone - provoquant potentiellement des problèmes de performance s'ils sont effectués à plusieurs reprises.

---

Résumé du pipeline de rendu

1. Parse HTML → Build Dom
2. Analyse CSS → Construire CSSOM
3. Combinez Dom CSSOM → Render Tree
4. Disposition: Calculer la géométrie
5. Peinture: convertir en pixels
6. Composite: calque et afficher la sortie finale

---

Ce processus entier se produit très rapidement - souvent en millisecondes - et peut se répéter chaque fois que des modifications se produisent (par exemple, interaction utilisateur, mises à jour JavaScript). Comprendre ce flux aide les développeurs à écrire des pages Web plus rapides et plus efficaces.

Fondamentalement, le rendu est le moyen du navigateur de transformer le code en quelque chose que vous pouvez voir et interagir.