Module 2 : Améliorer la vitesse d'un site mobile

2.2.1 Construction du modèle d'objet de document

Avant de pouvoir afficher la page, le navigateur doit créer les arborescences DOM et CSSOM. Il est donc nécessaire de lui fournir les codes HTML et CSS aussi vite que possible.

Pour commencer, prenons le cas le plus simple : une page HTML standard contenant du texte et une seule image. Comment le navigateur traite-t-il cette page ?

 

  1. Conversion : le navigateur lit les octets bruts du code HTML en dehors du disque ou du réseau, puis il les convertit en caractères individuels en fonction de l'encodage spécifique du fichier (par exemple, UTF-8).
  2. Segmentation en jetons : le navigateur convertit les chaînes de caractères en jetons distincts, comme indiqué par la norme W3C HTML5. Par exemple, "<html>", "<body>" et autres chaînes entourées de chevrons. Chaque jeton dispose de sa propre signification et de son propre ensemble de règles.
  3. Analyse lexicale : les jetons émis sont convertis en "objets", ce qui permet de définir leurs propriétés et les règles qui les régissent.
  4. Construction DOM : pour finir, comme le balisage HTML définit les relations entre les différentes balises (certaines balises appartiennent à d'autres balises), les objets créés sont reliés dans une arborescence de données. Cette dernière capture également les relations parent-enfant indiquées dans le balisage original : l'objet "HTML" est un parent de l'objet "body", qui est lui-même un parent de l'objet "paragraph", etc.

À la fin de ce processus, on obtient le modèle d'objet de document (DOM) de notre page HTML simple. Le navigateur utilisera ce modèle chaque fois qu'il devra traiter 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 construction de l'arborescence DOM. Le processus dans son intégralité peut prendre du temps, surtout si la quantité de code HTML à traiter est importante.

Remarque : Nous partons du principe que vous connaissez déjà un peu Chrome DevTools, autrement dit que vous savez capturer une cascade de réseau et enregistrer une chronologie. Si vous avez besoin d'un bref rappel, consultez cet article sur Chrome DevTools. Si vous êtes novice en la matière, vous devriez commencer par suivre la formation d'initiation Codeschool à DevTools.

Si vous ouvrez Chrome DevTools et que vous enregistrez une chronologie pendant que la page se charge, vous verrez le temps réel que cette page met à s'afficher. Dans l'exemple ci-dessus, le temps de conversion d'un bloc HTML en une arborescence DOM est d'environ cinq minutes. Si la page est plus volumineuse, le processus prendra sûrement plus de temps. Lors de la création d'animations fluides, le navigateur doit traiter de grandes quantités de codes HTML, ce qui peut entraîner des blocages.

L'arborescence DOM capture les propriétés et les relations dans le balisage du document, mais elle ne nous dit pas comment apparaîtra l'élément quand il sera affiché. C'est une responsabilité qui revient au code CSSOM.

Modèle d'objet CSS (CSSOM)

Pendant qu'il construisait le DOM de notre page standard, le navigateur a détecté une balise "link" dans la section "head" du document. Cette balise fait référence à une feuille de style CSS externe : style.css. Sachant qu'il a besoin de cette ressource pour afficher la page, il va anticiper en envoyant immédiatement une demande pour cette ressource, qui répond avec le contenu suivant :

body { font-size: 16px }
p { font-weight: bold }
span { color: red }
p span { display: none }
img { float: right }

Il aurait été possible d'indiquer les styles directement dans le balisage HTML (intégré). Mais en gardant le code CSS indépendant du HTML, le contenu et la conception peuvent être traités séparément : les graphistes travaillent sur le code CSS, les développeurs sur le code HTML, etc.

Tout comme avec le code HTML, nous devons maintenant convertir les règles CSS que nous avons reçues en un contenu que le navigateur peut comprendre et traiter. Nous allons donc répéter le processus HTML, mais cette fois pour le code CSS :

Les octets CSS sont convertis en caractères, puis en jetons, puis en nœuds. Pour finir, ils sont reliés au sein d'une arborescence appelée "CSS Object Model" (CSSOM) :

Pourquoi le CSSOM possède-t-il une arborescence ? Lorsqu'il calcule l'ensemble de styles final d'un objet de la page, le navigateur commence par appliquer la règle la plus générale pour ce nœud (s'il s'agit, par exemple, d'un enfant d'un élément "body", tous les styles "body" sont appliqués). Ensuite, il affine de manière récursive les styles calculés en appliquant des règles plus spécifiques, c'est-à-dire en "descendant la cascade" de règles.

Pour rendre cette théorie plus concrète, prenons l'exemple de l'arborescence CSSOM ci-dessus. Tout le texte contenu dans la balise "span", qui elle-même se trouve dans l'élément "body", présente une taille de police de 16 pixels, et est écrit en rouge (la consigne pour la taille de police "descend la cascade" entre "body" et "span"). Toutefois, si une balise "span" est un enfant d'une balise "paragraph" (p), le contenu de cette balise n'est pas affiché.

Gardez à l'esprit que l'arborescence CSSOM ci-dessus n'est pas complète, car elle ne montre que les styles que nous avons décidé de remplacer dans notre feuille de style. Tous les navigateurs fournissent un ensemble de styles par défaut, également connus sous le nom de "styles d'agent utilisateur" (ce sont ces styles qui nous sont proposés quand nous n'apportons pas les nôtres). Dans cet exemple, nos styles ne font que remplacer les styles par défaut (par exemple, les styles par défaut d'Internet Explorer).

Pour savoir combien de temps dure le traitement CSS, vous pouvez enregistrer une chronologie dans DevTools et rechercher l'événement "Recalculate Style". Contrairement à l'analyse DOM, la chronologie n'affiche pas d'entrée séparée "Parse CSS". Au lieu de cela, elle capture l'analyse, la construction de l'arborescence CSSOM et le calcul récursif des styles dans un seul événement.

Ici, notre feuille de style basique est traitée en 0,6 ms environ et modifie huit éléments de la page (certes, ce n'est pas beaucoup, mais ce n'est pas non plus gratuit). Mais d'où viennent ces huit éléments ? Les structures de données CSSOM et DOM sont indépendantes ! Il semblerait que le navigateur ait tenu secrète une étape importante. C'est ce qui nous amène à notre prochain sujet : l'arborescence d'affichage qui relie le DOM et le CSSOM.

Cet article vous a-t-il été utile ?
Comment pouvons-nous l'améliorer ?