Publié le 31 mars 2014
Les arborescences CSSOM et DOM sont combinées en une arborescence de rendu, qui est ensuite utilisée pour calculer la mise en page de chaque élément visible et sert d'entrée au processus de peinture qui affiche les pixels à l'écran. Il est essentiel d'optimiser chacune de ces étapes pour obtenir des performances de rendu optimales.
Dans la section précédente sur la construction du modèle objet, nous avons créé les arborescences DOM et CSSOM à partir des entrées HTML et CSS. Toutefois, il s'agit d'objets indépendants qui capturent différents aspects du document : l'un décrit le contenu, et l'autre décrit les règles de style à appliquer au document. Comment fusionner les deux et faire en sorte que le navigateur affiche des pixels à l'écran ?
Résumé
- Les arborescences DOM et CSSOM sont combinées pour former l'arborescence de rendu.
- L'arborescence de rendu ne contient que les nœuds nécessaires au rendu de la page.
- La mise en page calcule la position et la taille exactes de chaque objet.
- La dernière étape est la peinture, qui prend l'arborescence de rendu finale 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, parcourez 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 la sortie rendue.
- Certains nœuds sont masqués à l'aide de CSS et sont également omis de l'arborescence de rendu. Par exemple, le nœud span (dans l'exemple ci-dessus) est manquant dans 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 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 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 "reflux".
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>
Consultez cet exemple HTML rendu sous forme de page Web.
Le <body> de l'exemple précédent contient deux <div> imbriqués : le premier (parent) <div> définit la taille d'affichage du nœud sur 50% de la largeur de la fenêtre d'affichage, et le deuxième <div> (contenu par le parent) définit sa width sur 50% de son parent, soit 25% de la largeur de la fenêtre d'affichage.
La sortie 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 leur géométrie 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 un travail considérable. 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, la position et le calcul de la taille de l'arborescence de rendu dans la chronologie.
- Une fois la mise en page terminée, le navigateur émet les événements "Configuration de la peinture" et "Peinture", qui convertissent l'arborescence de rendu en pixels à l'écran.
Le temps nécessaire à 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 doit travailler ; plus les styles sont complexes, plus la peinture prend du temps (par exemple, une couleur unie est "bon marché" à peindre, tandis qu'une ombre portée est "coûteuse" à calculer et à rendre).
La page est enfin visible dans la fenêtre d'affichage :
Voici un bref récapitulatif des étapes du 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.
- Peignez les nœuds individuels à l'écran.
La page de démonstration peut sembler basique, mais elle nécessite un travail considérable de la part du navigateur. Si le DOM ou le CSSOM étaient modifiés, vous devriez répéter le processus pour déterminer les pixels à rendre à nouveau à l'écran.
L'optimisation du chemin de rendu critique consiste à réduire au minimum le temps total consacré aux é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 temps entre les mises à jour de l'écran après le rendu initial, c'est-à-dire d'obtenir des fréquences d'actualisation plus élevées pour le contenu interactif.