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 de rendu 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 de l'entrée HTML et CSS. Cependant, ces deux objets sont indépendants et 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 permettre au navigateur d'afficher les 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 requis pour afficher la page.
- Layout calcule la position et la taille exactes de chaque objet.
- La dernière étape consiste à peindre, qui utilise l'arborescence de rendu final et affiche les pixels à l'écran.
Tout d'abord, le navigateur combine le DOM et la 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 à 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.
Émettre des nœuds visibles avec du contenu et leurs styles calculés
Le résultat final est une arborescence de rendu contenant à 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 leur style calculé, 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 traverse. 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, et le second, contenu par le parent, définit sa largeur 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 en 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 leur style 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 une grande quantité de travail. Toutefois, les outils pour les développeurs Chrome peuvent vous fournir des informations utiles 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 de l'arborescence de rendu, sa position et le calcul de sa taille 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 construire, 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 du travail ; plus les styles sont compliqués, plus la peinture prend du temps (par exemple, une couleur unie est peu coûteuse à peindre, tandis qu'une ombre projetée est "coûteuse" à calculer et à afficher).
La page est enfin visible dans la fenêtre d'affichage:
Voici un récapitulatif de la procédure à 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écuter 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 le DOM ou la CSSOM ont été modifiés, vous devez répéter le processus afin de déterminer quels pixels doivent être à nouveau affichés à l'écran.
L'optimisation du chemin critique du rendu consiste à réduire au minimum le temps 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 le rendu initial, c'est-à-dire d'obtenir des fréquences d'actualisation plus élevées pour le contenu interactif.