Comment fonctionne un navigateur ?

• Guide d’apprentissage interactif conçu pour permettre aux ingénieurs web comme aux utilisateurs ordinaires de comprendre intuitivement le fonctionnement interne d’un navigateur
• Visualise étape par étape le processus, depuis la saisie dans la barre d’adresse jusqu’à la création de la requête HTTP, la résolution DNS, la connexion TCP, l’analyse du HTML, la construction du DOM et le pipeline de rendu
• Chaque étape est composée d’exemples que l’on peut saisir ou manipuler directement, afin d’expérimenter concrètement la communication réseau et le processus de rendu
• Montre clairement le rôle du DOM et la différence entre les étapes Layout–Paint–Composite, tout en permettant de voir visuellement les facteurs qui influencent les performances
• Une ressource structurée pour assimiler les concepts clés à destination des développeurs qui veulent comprendre l’architecture des navigateurs ou l’optimisation des performances web

---

Vue d’ensemble

• Ce guide a été conçu pour les personnes qui utilisent le web au quotidien mais ne comprennent pas clairement comment fonctionne un navigateur
  • Il comble les limites des ressources existantes, souvent soit trop techniques, soit trop superficielles
  • Il a été pensé pour permettre un apprentissage intuitif des détails techniques à travers de petits exemples interactifs
• Les versions HTTP, SSL/TLS, les détails du fonctionnement de DNS, etc. sont volontairement omis, et le contenu est présenté de façon concise autour des concepts essentiels
• Le projet est publié en open source, et des propositions d’amélioration peuvent être faites via GitHub

Navigateur et URL

• Toute chaîne saisie par l’utilisateur dans la barre d’adresse est convertie en interne au format URL
  • Exemple : “pizza” → https://google.com/search?q=pizza
  • Exemple : “example.com” → https://example.com
• Après avoir appuyé sur Entrée, une interface pratique permet d’observer directement le processus de conversion

Conversion de l’URL en requête HTTP

• Après avoir déterminé l’URL exacte à visiter, le navigateur envoie une requête HTTP au serveur
• Exemple d’en-têtes de requête :

  Host: example.com
  Accept: text/html
  

• L’en-tête Host sert d’identifiant du serveur auquel la requête est envoyée

Résolution de l’adresse du serveur (DNS)

• Le navigateur ne peut pas utiliser directement un nom de domaine comme example.com
  • Il faut le convertir en adresse IP via le système DNS pour pouvoir communiquer avec le serveur
• En saisissant un domaine dans le champ prévu, on peut voir le résultat de la résolution DNS (adresse IP)

Établissement de la connexion TCP

• Une fois l’adresse IP obtenue via DNS, le navigateur établit une connexion fiable avec le serveur à l’aide du protocole TCP
• La connexion est établie grâce au processus de handshake en trois étapes
  1. SYN : le client demande la connexion
  2. SYN-ACK : le serveur répond et confirme
  3. ACK : le client confirme à son tour
• TCP maintient une communication stable grâce à la garantie de l’ordre des données et au mécanisme de retransmission
• Il est possible de couper le réseau ou de manipuler les paquets pour expérimenter la fiabilité de la transmission

Requête et réponse HTTP

• Après l’établissement de la connexion TCP, le navigateur envoie une requête HTTP, et le serveur renvoie une réponse HTTP
• Le trajet de la requête et de la réponse est affiché visuellement, ce qui permet d’observer le flux des paquets
• Quand la réponse arrive, le navigateur sépare les en-têtes et le corps puis commence le rendu du HTML

Analyse du HTML et création de l’arbre DOM

• Le navigateur transmet les octets HTML au parseur (parser) pour construire l’arbre DOM
• En saisissant un exemple de HTML, on peut voir visuellement le processus de transformation des balises comme <h1> et <p> en nœuds DOM
• L’analyse se fait en streaming, ce qui permet de créer des nœuds avant même l’arrivée complète du document
• Lorsqu’une balise <script> apparaît, l’analyse est temporairement interrompue pour exécuter le script
• Une fois terminé, le DOM est combiné avec le CSS pour former l’arbre de rendu (render tree)

Importance du DOM

• Le DOM (Document Object Model) est le modèle du document en mémoire dans le navigateur,
  une structure centrale partagée par le parseur HTML, le moteur de sélecteurs CSS et le runtime JavaScript
• Toute modification du DOM est immédiatement répercutée sur la mise en page, le style et les interactions utilisateur
• Une fonction d’aperçu permet de voir les changements du DOM se refléter en temps réel lorsqu’on modifie le code JavaScript

Layout, Paint, Composite

• Quand le DOM et le CSS sont prêts, le navigateur exécute le pipeline de rendu
  • Layout (Reflow) : calcul de la taille et de la position des éléments
  • Paint : remplissage des pixels
  • Composite : assemblage des couches sur le GPU
• Un changement de couleur relance seulement Paint, tandis qu’un changement de taille relance à la fois Layout et Paint
• Il est possible de vérifier d’un clic si chaque étape est relancée ou non
• Le guide montre visuellement qu’une page avec beaucoup d’opérations de Layout se rend plus lentement

Résumé

• Un guide qui permet d’apprendre par l’expérimentation directe tout le processus, de la saisie de l’adresse au rendu
• En parcourant toutes les étapes, on peut se construire un modèle mental clair du fonctionnement d’un navigateur
• Le projet est en open source, et des améliorations peuvent être proposées sur GitHub via des issues ou des Pull Requests