Publié le 31 mars 2014
Les arbres CSSOM et DOM sont combinés dans un arbre de rendu, qui est ensuite utilisé pour calculer la mise en page de chaque élément visible et sert d'entrée au processus de peinture qui effectue le rendu des pixels à l'écran. L'optimisation de chacune de ces étapes est essentielle pour obtenir des performances de rendu optimales.
Dans la section précédente sur la construction du modèle d'objets, nous avons créé les arbres DOM et CSSOM en fonction des entrées HTML et CSS. Toutefois, il s'agit de deux objets indépendants qui capturent différents aspects du document: l'un décrit le contenu et l'autre les règles de style à appliquer au document. Comment fusionner les deux et demander au navigateur d'afficher des pixels à l'écran ?
Résumé
- Les arbres DOM et CSSOM se combinent pour former l'arborescence de rendu.
- L'arborescence de rendu ne contient que les nœuds nécessaires à l'affichage de la page.
- La mise en page calcule la position et la taille exactes de chaque objet.
- La dernière étape consiste à peindre, ce qui récupère l'arborescence de rendu finale et affiche les pixels à l'écran.
Tout d'abord, le navigateur combine le DOM et le CSSOM dans un "arbre de rendu", qui capture tout le contenu DOM visible sur la page et toutes les informations de style CSSOM pour chaque nœud.
Pour créer l'arborescence de rendu, le navigateur procède à peu près comme suit:
En commençant par la racine de l'arborescence DOM, parcourez chaque nœud visible.
- Certains nœuds ne sont pas visibles (par exemple, les balises de script, les balises méta, etc.) et sont omis, car ils ne sont pas reflétés dans la sortie affichée.
- Certains nœuds sont masqués à l'aide de CSS et sont également exclus de l'arborescence de rendu. Par exemple, le nœud span (dans l'exemple ci-dessus) est absent de l'arborescence de rendu, car une règle explicite définit la propriété "display: none" sur celui-ci.
Pour chaque nœud visible, recherchez les règles CSSOM correspondantes appropriées et appliquez-les.
Émettez des nœuds visibles avec du contenu et leurs styles calculés.
La sortie finale est une arborescence de rendu qui contient à la fois le contenu et les informations de style de tous les contenus visibles à 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 le viewport de l'appareil. C'est l'étape de "mise en page", également appelée "reflow".
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. Considérez l'exemple suivant :
<!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 <body> de l'exemple précédent contient deux <div> imbriqués: le premier (parent) définit la taille d'affichage du nœud sur 50% de la largeur de la fenêtre d'affichage, et le second (contenant le parent) définit son width sur 50% de son parent, soit 25% de la largeur de la fenêtre d'affichage.<div><div>
Le résultat du processus de mise en page est un "modèle de boîte", qui capture précisément 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 "rastrisation".
Cela peut prendre un certain temps, car le navigateur doit effectuer de nombreuses tâches. Toutefois, les outils pour les développeurs Chrome peuvent fournir des informations sur les trois étapes décrites précédemment. Examinez l'étape de mise en page de notre exemple "Hello World" d'origine:
- L'événement "Mise en page" capture la construction de l'arborescence de rendu, la position et le calcul de la taille dans la chronologie.
- Une fois la mise en page terminée, le navigateur émet des événements "Paint Setup" (Configuration de la peinture) et "Paint" (Peinture), qui convertissent l'arborescence de rendu en pixels à l'écran.
Le temps nécessaire pour effectuer la construction, la mise en page et la peinture de 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 volumineux, plus le navigateur a de travail ; plus les styles sont complexes, plus le temps de peinture est long (par exemple, une couleur unie est "économique" à peindre, tandis qu'une ombre portée est "coûteuse" à calculer et à afficher).
La page est enfin visible dans la fenêtre d'affichage:
Voici un bref récapitulatif des étapes à suivre dans le navigateur:
- Traitez le balisage HTML et créez l'arborescence DOM.
- Traitez la balise CSS et créez l'arborescence CSSOM.
- Combiner le DOM et le CSSOM dans un arbre de rendu.
- Exécutez la mise en page sur l'arborescence de rendu pour calculer la géométrie de chaque nœud.
- Dessinez les nœuds individuels à l'écran.
La page de démonstration peut sembler basique, mais elle nécessite beaucoup de travail de la part du navigateur. Si le DOM ou le CSSOM ont été modifiés, vous devrez répéter le processus pour déterminer les pixels à recalculer à l'écran.
L'optimisation du chemin critique de 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 aussi rapidement que possible et de réduire le temps entre les mises à jour de l'écran après l'affichage initial, c'est-à-dire d'obtenir des fréquences d'actualisation plus élevées pour le contenu interactif.