Publié le 31 mars 2014
Avant que le navigateur puisse afficher la page, il doit construire les arbres DOM et CSSOM. Par conséquent, nous devons nous assurer de transmettre le code HTML et CSS au navigateur le plus rapidement possible.
Résumé
- Octets → caractères → jetons → nœuds → modèle d'objet
- La balise HTML est transformée en modèle objet de document (DOM), tandis que la balise CSS est transformée en modèle objet CSS (CSSOM).
- Le DOM et le CSSOM sont des structures de données indépendantes.
- Le panneau "Performances" de Chrome DevTools nous permet de capturer et d'inspecter les coûts de construction et de traitement du DOM et du CSSOM.
Document Object Model (DOM)
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link href="style.css" rel="stylesheet" />
<title>Critical Path</title>
</head>
<body>
<p>Hello <span>web performance</span> students!</p>
<div><img src="awesome-photo.jpg" /></div>
</body>
</html>
Commencez par le cas le plus simple possible : une page HTML simple avec du texte et une seule image. Comment le navigateur traite-t-il cette page ?
- Conversion : le navigateur lit les octets bruts du code HTML sur le disque ou sur le réseau, et les traduit en caractères individuels en fonction de l'encodage spécifié du fichier (par exemple, UTF-8).
- Tokenisation : le navigateur convertit des chaînes de caractères en jetons distincts (comme indiqué par la norme HTML5 du W3C, par exemple
<html>,<body>) et d'autres chaînes entre crochets angulaires. Chaque jeton a une signification particulière et son propre ensemble de règles. - Lexique : les jetons émis sont convertis en "objets", qui définissent leurs propriétés et leurs règles.
- Construction DOM : comme le balisage HTML définit les relations entre différentes balises (certaines sont contenues dans d'autres balises), les objets créés sont liés dans une arborescence de données qui capture également les relations parent-enfant définies dans le balisage d'origine. L'objet HTML est un parent de l'objet body, le body est donc un parent de l'objet paragraph jusqu'à ce que la représentation complète du document soit créée.
Le résultat final de l'ensemble de ce processus est le Document Object Model (DOM) de notre page simple, que le navigateur utilise pour tout traitement ultérieur de la page.
Chaque fois que le navigateur traite la balise HTML, il effectue toutes les étapes précédemment définies : convertir les octets en caractères, identifier les jetons, convertir les jetons en nœuds et créer l'arborescence DOM. Ce processus complet peut prendre un certain temps, en particulier si nous avons une grande quantité de code HTML à traiter.
Si vous ouvrez les outils pour les développeurs Chrome et enregistrez une chronologie pendant le chargement de la page, vous pouvez voir le temps réel nécessaire pour effectuer cette étape. Dans l'exemple précédent, il nous a fallu environ 5 ms pour convertir un extrait de code HTML en arbre DOM. Pour une page plus grande, ce processus peut prendre beaucoup plus de temps. Lors de la création d'animations fluides, cela peut devenir un goulot d'étranglement si le navigateur doit traiter de grandes quantités de code HTML.
L'arborescence DOM capture les propriétés et les relations du balisage du document, mais elle ne nous indique pas à quoi ressemblera l'élément lors du rendu. C'est la responsabilité du CSSOM.
Modèle d'objet CSS (CSSOM)
Lorsque le navigateur a construit le DOM de notre page de base, il a rencontré un élément <link> dans le <head> du document faisant référence à une feuille de style CSS externe : style.css. En anticipant qu'il a besoin de cette ressource pour afficher la page, il envoie immédiatement une requête pour cette ressource, qui renvoie le contenu suivant:
body {
font-size: 16px;
}
p {
font-weight: bold;
}
span {
color: red;
}
p span {
display: none;
}
img {
float: right;
}
Nous aurions pu déclarer nos styles directement dans la balise HTML (en ligne), mais en gardant notre CSS indépendant du HTML, nous pouvons traiter le contenu et la conception comme des éléments distincts : les concepteurs peuvent travailler sur le CSS, les développeurs peuvent se concentrer sur le HTML, ainsi que sur d'autres éléments.
Comme pour le code HTML, nous devons convertir les règles CSS reçues en règles compréhensibles et utilisables par le navigateur. Par conséquent, nous répétons le processus HTML, mais pour le CSS au lieu de HTML:
Les octets CSS sont convertis en caractères, puis en jetons, puis en nœuds, et enfin ils sont liés dans une structure arborescente appelée "modèle d'objet CSS" (CSSOM) :
Pourquoi le CSSOM présente-t-il une structure arborescente ? Lors du calcul de l'ensemble final de styles pour un objet donné sur la page, le navigateur commence par la règle la plus générale applicable à ce nœud (par exemple, s'il s'agit d'un enfant d'un élément body, tous les styles body s'appliquent) et affine ensuite de manière récursive les styles calculés en appliquant des règles plus spécifiques. Autrement dit, les règles "cascadent vers le bas".
Pour le rendre plus concret, prenons l'exemple de l'arborescence CSSOM décrite précédemment. Tout texte contenu dans la balise <span> placée dans l'élément body a une taille de police de 16 pixels et est en rouge. La directive font-size se cascade de body à span. Toutefois, si un élément span est un enfant d'une balise de paragraphe (p), son contenu n'est pas affiché.
Notez également que l'arbre décrit précédemment n'est pas l'arbre CSSOM complet et n'affiche que les styles que nous avons décidé de remplacer dans notre feuille de style. Chaque navigateur fournit un ensemble de styles par défaut, également appelés "styles user-agent" (c'est ce que nous voyons lorsque nous ne fournissons aucun de nos propres styles). Nos styles remplacent ces valeurs par défaut.
Pour connaître la durée du traitement CSS, vous pouvez enregistrer une chronologie dans DevTools et rechercher l'événement "Recalculate Style" (Recalculer le style). Contrairement à l'analyse DOM, la timeline n'affiche pas d'entrée "Parse CSS" distincte, mais capture l'analyse et la construction de l'arborescence CSSOM, ainsi que le calcul récursif des styles calculés pour cet événement spécifique.
Le traitement de notre code de styles trivial prend environ 0,6 ms et affecte huit éléments de la page.Ce n'est pas beaucoup, mais là encore, ce n'est pas sans frais. Cependant, d'où viennent ces huit éléments ? Le CSSOM et le DOM sont des structures de données indépendantes. Il s'avère que le navigateur masque une étape importante. Ensuite, l'arborescence de rendu est couverte. Elle relie le DOM et le CSSOM.