Les arborescences CSSOM et DOM sont combinées dans une arborescence de rendu, qui est ensuite utilisée pour calculer la mise en page de chaque élément visible et qui sert d'entrée au processus de peinture qui affiche les pixels à l'écran. L'optimisation de chacune de ces étapes est essentielle pour obtenir des performances d'affichage optimales.
Dans la section précédente sur la construction du modèle d'objet, nous avons créé les arborescences DOM et CSSOM en fonction des entrées HTML et CSS. Cependant, ces deux objets sont indépendants et capturent différents aspects du document: l'un décrit le contenu, l'autre décrit les règles de style à appliquer au document. Comment fusionner les deux et faire en sorte que le navigateur affiche les pixels à l'écran ?
Résumé
- Les arborescences DOM et CSSOM se combinent pour former l'arborescence de rendu.
- L'arborescence de rendu ne contient que les nœuds requis pour afficher la page.
- Layout calcule la position et la taille exactes de chaque objet.
- La dernière étape est le processus de peinture, qui utilise l'arborescence de rendu final et affiche les pixels à l'écran.
Tout d'abord, le navigateur combine le DOM et le CSSOM dans une "arborescence de rendu", qui capture tout le contenu DOM visible sur la page et toutes les informations de style CSSOM pour chaque nœud.
Pour construire l'arborescence de rendu, le navigateur effectue approximativement les opérations suivantes:
En commençant par la racine de l'arborescence DOM, balayez chaque nœud visible.
- Certains nœuds ne sont pas visibles (par exemple, les balises de script, les balises Meta, etc.) et sont omis, car ils ne sont pas reflétés dans le résultat affiché.
- Certains nœuds sont masqués via CSS et sont également omis de l'arborescence de rendu. Par exemple, le nœud "span" (dans l'exemple ci-dessus) est absent de l'arborescence de rendu, car nous avons une règle explicite qui définit la propriété "display: none".
Pour chaque nœud visible, recherchez les règles CSSOM correspondantes et appliquez-les.
Émettez des nœuds visibles avec du contenu et leurs styles calculés.
Le résultat final est une arborescence de rendu qui contient à la fois les informations de contenu et de style de tout le contenu visible à l'écran. Une fois l'arborescence de rendu en place, nous pouvons passer à l'étape de mise en page.
Jusqu'à présent, nous avons calculé les nœuds qui doivent être visibles et leurs styles calculés, mais nous n'avons pas calculé leur position et leur taille exactes dans la fenêtre d'affichage de l'appareil. Il s'agit de l'étape de mise en page, également appelée "ajustement de la mise en page".
Pour déterminer la taille et la position exactes de chaque objet sur la page, le navigateur commence à la racine de l'arborescence de rendu et la parcourt. Prenons un exemple simple et pratique:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Critial Path: Hello world!</title>
</head>
<body>
<div style="width: 50%">
<div style="width: 50%">Hello world!</div>
</div>
</body>
</html>
Le corps de la page ci-dessus contient deux div imbriqués: le premier div (parent) définit la taille d'affichage du nœud sur 50% de la largeur de la fenêtre d'affichage, tandis que le deuxième div, inclus dans le parent, définit sa largeur à 50% de son parent, soit 25% de la largeur de la fenêtre d'affichage.
Le résultat du processus de mise en page est un "modèle en forme de boîte", qui capture avec précision la position et la taille exactes de chaque élément dans la fenêtre d'affichage: toutes les mesures relatives sont converties en pixels absolus à l'écran.
Enfin, maintenant que nous savons quels nœuds sont visibles, ainsi que leurs styles et géométries calculés, nous pouvons transmettre ces informations à l'étape finale, qui convertit chaque nœud de l'arborescence de rendu en pixels réels à l'écran. Cette étape est souvent appelée "peinture" ou "rastérisation".
Cela peut prendre un certain temps, car le navigateur doit effectuer une grande quantité de travail. Toutefois, les outils pour les développeurs Chrome peuvent fournir des informations sur les trois étapes décrites ci-dessus. Examinons l'étape de mise en page de notre exemple "hello world" d'origine:
- L'événement "Mise en page" capture la construction, la position et le calcul de la taille de l'arborescence de rendu dans la timeline.
- Une fois la mise en page terminée, le navigateur émet des événements "Paint Setup" et "Paint" qui convertissent l'arborescence de rendu en pixels à l'écran.
Le temps nécessaire pour créer, mettre en page et peindre l'arborescence de rendu varie en fonction de la taille du document, des styles appliqués et de l'appareil sur lequel il s'exécute: plus le document est grand, plus le navigateur a de travail. Plus les styles sont compliqués, plus le temps de peinture est long (par exemple, une couleur unie est "pas chère" à peindre, tandis qu'une ombre projetée est "coûteuse" en termes de calcul et d'affichage).
La page est enfin visible dans la fenêtre d'affichage:
Voici un récapitulatif des étapes à suivre dans ce navigateur:
- Traitez le balisage HTML et créez l'arborescence DOM.
- Traitez le balisage CSS et créez l'arborescence CSSOM.
- Combinez le DOM et le CSSOM dans une arborescence de rendu.
- Exécutez la mise en page sur l'arborescence de rendu pour calculer la géométrie de chaque nœud.
- Affichez les nœuds individuels à l'écran.
Notre page de démonstration peut sembler simple, mais elle demande beaucoup de travail. Si vous modifiez le DOM ou le CSSOM, vous devrez répéter le processus afin de déterminer quels pixels doivent être affichés à nouveau à l'écran.
L'optimisation du chemin critique du rendu consiste à réduire le temps total passé à effectuer les étapes 1 à 5 de la séquence ci-dessus. Cela permet d'afficher le contenu à l'écran le plus rapidement possible et de réduire le délai entre les mises à jour de l'écran après le rendu initial. En d'autres termes, vous obtenez des fréquences d'actualisation plus élevées pour le contenu interactif.