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 fournir à la fois le code HTML et CSS dans le 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" des outils pour les développeurs Chrome nous permet de capturer et d'inspecter la construction et les coûts 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 réseau, puis les convertit en caractères individuels en fonction du fichier (UTF-8, par exemple).
- 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. - Lexage:les jetons émis sont convertis en "objets", qui définissent leurs propriétés et règles.
- Construction du DOM : enfin, comme le balisage HTML définit des relations entre différentes balises (certaines balises sont contenues dans d'autres), les objets créés sont liés dans une structure de données arborescente qui capture également les relations parent-enfant définies dans le balisage d'origine : l'objet HTML est parent de l'objet body, l'objet body est parent de l'objet paragraph, jusqu'à ce que la représentation complète du document soit créée.
Le résultat final de ce processus est le modèle DOM (Document Object Model) de notre page simple, que le navigateur utilise pour tous les traitements ultérieurs .
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. L'ensemble du processus peut prendre un certain temps, surtout 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 nécessaire pour effectuer cette étape. Dans l'exemple précédent, il nous a fallu environ 5 ms pour convertir un bloc de code HTML en arborescence DOM. Pour une 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 il ne nous dit pas à quoi ressemblera l'élément une fois 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. 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 quelque chose que le navigateur peut comprendre et utiliser. Par conséquent, nous répétons le processus HTML, mais pour CSS au lieu de HTML:
Les octets CSS sont convertis en caractères, puis en jetons, puis en nœuds et Enfin, elles sont reliées dans une arborescence connue sous le nom de "CSS Object Model" (CSSOM):
Pourquoi le CSSOM présente-t-il une structure arborescente ? Lors du calcul de l'ensemble final de chaque objet de la page, le navigateur commence par l'utilisation la plus générale applicable à ce nœud (par exemple, s'il s'agit de l'enfant d'un élément de corps, puis tous les styles de carrosserie s'appliquent), puis affine de manière récursive les styles calculés en appliquant des règles plus spécifiques ; c'est-à-dire que les règles sont "décrochées".
Pour le rendre plus concret, prenons l'exemple de l'arborescence CSSOM décrite précédemment. Tout texte
contenue dans le tag <span> placé dans l'élément "body" possède un
taille de police de 16 pixels et avec du texte en rouge (la cascade de la directive font-size est appliquée)
est passé de body à span. Toutefois, si un span est l'enfant d'une
(p), son contenu ne s'affiche pas.
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 d'agent utilisateur". C'est ce que nous voyons lorsque nous n'en fournissons pas nous-mêmes. Nos styles remplacent ces valeurs par défaut.
Pour connaître le temps nécessaire au traitement CSS, vous pouvez enregistrer une chronologie Les outils de développement et recherchez "Recalculer le style". contrairement à l'analyse DOM, la timeline n'affiche pas de code "Analyser le code CSS" entrée, et capture à la place et la construction de l'arborescence CSSOM, ainsi que le calcul récursif de les styles calculés pour cet événement.
Le traitement de notre style trivial met environ 0,6 ms à traiter et affecte huit éléments sur la page — pas grand-chose, 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 associe le DOM et le CSSOM.