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 de l'entrée 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.
- Layout calcule la position et la taille exactes de chaque objet.
- La dernière étape est la peinture, qui intègre 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:
À partir de la racine de l'arborescence DOM, parcourez chaque nœud visible.
- Certains nœuds ne sont pas visibles (balises de script, 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 à 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.
Le résultat du processus de mise en page est un "modèle 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 "rastrisation".
Cette opération peut prendre un certain temps, car le navigateur doit effectuer certaines tâches. Toutefois, les outils pour les développeurs Chrome peuvent vous donner 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 "Layout" (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" (Configuration de la peinture) et "Paint" (Peinture), qui convertissent l'arborescence de rendu en pixels à l'écran.
Le temps nécessaire pour construire l'arborescence de rendu, la mise en page et la peinture 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 est chargé. Plus les styles sont complexes, plus il faut de temps pour peindre également (par exemple, la peinture de couleur unie est économique, tandis que le calcul et le rendu d'une ombre projetée sont coûteux).
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 à recréer à 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.