Pour que le navigateur puisse afficher la page, il doit créer les arborescences DOM et CSSOM. Par conséquent, nous devons nous assurer de fournir les codes HTML et CSS au navigateur aussi rapidement que possible.
Résumé
- Octets → caractères → jetons → nœuds → modèle d'objet.
- Le balisage HTML est transformé en Document Object Model (DOM), et le balisage CSS est transformé en CSSOM (CSS Object Model).
- DOM et 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 les coûts de construction et de traitement des DOM et 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>
Commençons par le cas le plus simple: une page HTML standard 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 à partir du disque ou du réseau, puis les convertit en caractères individuels en fonction de l'encodage spécifié du fichier (par exemple, UTF-8).
- Tokenisation:le navigateur convertit les chaînes de caractères en jetons distincts (comme spécifié par la norme W3C HTML5, par exemple "<html>", "<body>") et d'autres chaînes entre chevrons. Chaque jeton a une signification particulière et son propre ensemble de règles.
- Lexing:les jetons émis sont convertis en "objets", qui définissent leurs propriétés et leurs règles.
- Construction DOM : enfin, comme le balisage HTML définit les relations entre différentes balises (certaines balises 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 un parent de l'objet paragraph, et ainsi de suite.
La sortie finale de l'ensemble de ce processus est le Document Object Model (DOM) de notre page simple, que le navigateur utilise pour tous les traitements ultérieurs de la page.
Chaque fois que le navigateur traite le balisage HTML, il effectue toutes les étapes ci-dessus: conversion des octets en caractères, identification des jetons, conversion des jetons en nœuds et création de l'arborescence DOM. Ce processus complet 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 réel nécessaire pour effectuer cette étape. Dans l'exemple ci-dessus, la conversion d'un fragment de code HTML en arborescence DOM a pris environ 5 ms. Pour une page plus grande, ce processus peut prendre beaucoup plus de temps. La création d'animations fluides peut facilement 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 ne nous dit pas à quoi ressemblera l'élément une fois affiché. C'est la responsabilité du CSSOM.
Modèle d'objet CSS (CSSOM)
Pendant que le navigateur construisait le DOM de notre page simple, il a rencontré une balise de lien dans la section "head" du document, qui fait référence à une feuille de style CSS externe: style.css. En anticipant la nécessité d'utiliser 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 le balisage HTML (intégré), mais le fait de garder notre CSS indépendant du HTML nous permet de traiter le contenu et la conception comme des préoccupations distinctes: les concepteurs peuvent travailler sur le CSS, les développeurs peuvent se concentrer sur le HTML, etc.
Comme pour le code HTML, nous devons convertir les règles CSS reçues en un format compréhensible par le navigateur et compréhensible par le navigateur. 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. Enfin, ils sont liés dans une arborescence appelée "CSS Object Model" (CSSOM):
Pourquoi le CSSOM a-t-il une arborescence ? Lors du calcul de l'ensemble final de styles pour tout objet de la page, le navigateur commence par la règle la plus générale applicable à ce nœud (par exemple, s'il s'agit de l'enfant d'un élément du corps, tous les styles de corps s'appliquent), puis affine les styles calculés de manière récursive en appliquant des règles plus spécifiques, c'est-à-dire les règles "en cascade vers le bas".
Pour le rendre plus concret, prenons l'exemple de l'arborescence CSSOM ci-dessus. Tout texte contenu dans la balise <span> placée dans l'élément "body" présente une taille de police de 16 pixels et du texte en rouge. La directive font-size descend de body à span. Toutefois, si une balise span est un enfant d'une balise de paragraphe (p), son contenu n'est pas affiché.
Notez également que l'arborescence CSSOM ci-dessus n'est pas complète. Elle 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 de user-agent". C'est ce que nous voyons lorsque nous ne fournissons aucun de nos propres styles. Nos styles remplacent simplement ces valeurs par défaut.
Pour savoir combien de temps prend le traitement CSS, vous pouvez enregistrer une chronologie dans DevTools et rechercher l'événement "Recalculate Style" (Recalculer le style). Contrairement à l'analyse DOM, la chronologie n'affiche pas d'entrée "Parse CSS" distincte. À la place, elle capture l'analyse, la construction de l'arborescence CSSOM, ainsi que le calcul récursif des styles calculés pour cet événement unique.
Le traitement de notre feuille de style simple prend environ 0, 6 ms et affecte huit éléments de la page.Là encore, ce n'est pas sans frais. Cependant, d'où viennent les 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. Passons maintenant à l'arborescence de rendu, qui relie le DOM et le CSSOM.