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. Optimiser chacun de ces éléments pour obtenir des performances de rendu optimales.
Dans la section précédente sur la construction du modèle d'objet, nous avons créé le DOM les arborescences CSSOM en fonction de l'entrée HTML et CSS. Cependant, ces deux options sont des objets indépendants qui capturent différents aspects du document: un décrit le contenu, et l'autre décrit les règles de style qui doivent être appliquée au document. Comment fusionner les deux et demander au navigateur d'afficher des 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 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 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 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 (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 et appliquez-les.
Émettre des nœuds visibles avec du contenu et leurs styles calculés
Le résultat final est une arborescence d'affichage 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 à la "mise en page". à chaque étape.
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 <div> (contenant le parent) définit son 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 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 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 :
- La "Mise en page" capture la construction, la position et le calcul de la taille de l'arborescence d'affichage dans la timeline.
- Une fois la mise en page terminée, le navigateur renvoie une erreur "Paint Setup" (Configuration de la peinture). et « Paint » 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.
- Traiter le balisage CSS et créer 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 afin de 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 le plus rapidement possible et de réduire le délai entre les mises à jour de l'écran après le rendu initial. c'est-à-dire, d'atteindre des fréquences d'actualisation plus élevées pour le contenu interactif.