Comment le navigateur analyse-t-il un fichier HTML…

Le navigateur lit le fichier HTML octet par octet. Un flux de caractères est construit en fonction du codage du fichier. Ce flux est analysé, formant des tokens (balise d'ouverture et de fermeture, texte, commentaire, doctype). Les tokens sont transformés en nœuds (nodes), qui sont liés dans un arbre : le Document Object Model (DOM).

Le processus d'analyse passe par les étapes suivantes :

Lecture des octets : Le navigateur reçoit un flux d'octets.
Détermination du codage : Le codage du fichier est déterminé (par exemple, UTF-8, Windows-1251). Cela peut se faire via les en-têtes HTTP, les balises <meta> ou par détection automatique.
Conversion en caractères : Les octets sont convertis en caractères selon le codage déterminé.

Tokenisation : Le flux de caractères est divisé en tokens.

<!-- Exemple de tokens -->
<p> // Token : balise d'ouverture "p"
  Bonjour, // Token : texte "Bonjour, "
  le monde! // Token : texte "le monde!"
</p> // Token : balise de fermeture "p"

Construction de l'AST (Arbre DOM) : À partir de la séquence de tokens, un arbre de nœuds (DOM) est construit. Le navigateur maintient une pile de balises ouvertes ; lorsqu'il rencontre une balise de fermeture, il ferme la balise correspondante dans la pile et ajoute son nœud à l'arbre.

<!-- Structure DOM simple pour : -->
<!DOCTYPE html>
<html>
  <head>
    <title>Exemple</title>
  </head>
  <body>
    <p>Texte</p>
  </body>
</html>

// L'arbre DOM aura une structure reflétant l'imbrication des balises.
// Par exemple, le nœud "p" sera enfant du nœud "body".

Analyse des scripts et styles : Pendant l'analyse du HTML, le navigateur rencontre les balises <script> et <link>/<style>.
- <script> : Par défaut, l'analyse du HTML est suspendue, le script est chargé, analysé et exécuté. Après l'exécution, l'analyse du HTML reprend. Les attributs async et defer modifient ce comportement. async exécute le script de manière asynchrone, sans bloquer l'analyse. defer retarde l'exécution du script jusqu'à ce que l'analyse HTML soit terminée.
- <link> / <style> : Le CSS est analysé en parallèle avec le HTML et crée un Modèle d'Objet CSS (CSSOM). La présence de <link> avant <script> peut retarder l'exécution du script, car le navigateur peut attendre la construction du CSSOM pour assurer une application correcte des styles avant l'exécution du script.

Comment le navigateur analyse-t-il un fichier HTML?