Comment le navigateur traite-t-il la page web?

Le processus de traitement d'une page web par le navigateur peut être divisé en plusieurs étapes :

1. Requête et récupération de la ressource :

   • L'utilisateur saisit l'URL dans la barre d'adresse ou clique sur un lien.
   • Le navigateur envoie une requête HTTP au serveur.
   • Le serveur traite la requête et envoie une réponse, contenant généralement un document HTML.

2. Analyse syntaxique (Parsing) :

   • Le navigateur reçoit le document HTML sous forme de bytes.
   • Ces bytes sont décodés en caractères selon le codage spécifié.
   • Le parseur HTML analyse le document caractère par caractère et construit l'arbre DOM (Document Object Model). Le DOM représente la structure logique du document.
   • Lorsqu'il détecte des balises <link> (pour CSS) ou <script> (pour JavaScript), le navigateur commence à télécharger ces ressources en parallèle de l'analyse du HTML.

3. Construction du CSSOM :

   • Le parseur CSS analyse les règles CSS des balises <style>, <link> et styles en ligne.
   • À partir de ces règles, il construit l'arbre CSSOM (CSS Object Model), qui contient tous les styles pour chaque élément de la page.

4. Construction de l'arbre de rendu (Render Tree) :

   • Le Render Tree combine le DOM et le CSSOM. Il ne contient que les éléments qui seront affichés sur la page et leurs styles correspondants.
   • Les éléments avec la règle CSS display: none; ne sont pas inclus dans le Render Tree.

5. Mise en page (Layout / Reflow) :

   • Le navigateur calcule les dimensions et positions exactes de chaque élément sur la page en se basant sur le Render Tree. Ce processus s'appelle Layout ou Reflow.
   • La mise en page se produit lors de la première construction du Render Tree et aussi lorsque la taille de la fenêtre change, que des éléments sont ajoutés ou supprimés, ou que leurs styles changent.

6. Peinture (Painting / Repaint) :

   • Le navigateur peint chaque élément à l'écran en utilisant les informations du Render Tree et les résultats de l'étape de Layout.
   • La peinture peut également se produire lorsque les propriétés visibles de l'élément changent, comme la couleur, le fond, l'opacité, sans changer sa géométrie (ce qu'on appelle Repaint).

7. Composition :

   • Les éléments dessinés peuvent être regroupés en différentes couches pour optimiser le rendu et l'animation.
   • Ces couches sont ensuite combinées pour afficher la page finale à l'écran.

8. Exécution des scripts :

   • Lorsque le parseur HTML atteint la balise <script>, l'exécution de l'analyse HTML est suspendue (par défaut), et le navigateur télécharge, analyse et exécute le code JavaScript.
   • JavaScript peut modifier le DOM et le CSSOM, ce qui peut entraîner des étapes répétées de Layout et de Peinture.
   • Les attributs async et defer pour la balise <script> influencent l'ordre et le moment d'exécution des scripts, permettant de continuer l'analyse du HTML.

Voici une visualisation approximative du flux :

Requête HTTP
↓
Bytes HTML
↓
Parser HTML
→ Parser CSS (en parallèle)
    ↓           ↓
    Arbre DOM  Arbre CSSOM
          ↓
     Arbre de rendu
          ↓
        Layout
          ↓
       Peinture
          ↓
     Composition
          ↓
   Affichage à l'écran

L'exécution de JavaScript peut interrompre le processus à différents moments, provoquant des étapes répétées :

Parser HTML + balise Script
↓
Pause du parsing HTML
↓
Téléchargement du Script
↓
Analyse du Script
↓
Exécution du Script
↓
(Possibilité de modifier DOM/CSSOM → Déclenchement de Layout/Peinture)
↓
Reprise du parsing HTML

Comprendre ce processus est essentiel pour optimiser la performance des pages web.