L'autodidacte

Navigateur

Navigateur
Partager l'article

C’est un sujet qui revient régulièrement dans les questions d’entretiens d’embauche : Que se passe-t-il lorsque nous entrons une url dans notre navigateur et pressons la touche “entrer” ?

Cette question est particulièrement pertinente pour diverses raisons :

  • Elle permet d’évaluer le niveau de connaissance générale du candidat sur le fonctionnement d’internet et de l’informatique
  • Elle permet d’évaluer la capacité du candidat à être synthétique
  • Elle permet également de voir si le candidat sait dire qu’il ne sait pas

Si j’en parle ici c’est surtout parce que c’est également un excellent fil rouge pour apprendre ou réapprendre comment fonctionne le web.

Nous allons revenir sur la vision macro dans cet article et appuyer, au fur et à mesure, les propos avec des articles dédiés.

Étape 1 : Parsing de l’URL

Une URL comme https://www.exemple.net/demo?user=1234 doit être décomposée pour que le navigateur puisse l’exploiter. C’est ce qu’on appelle le parsing de l’URL. Voici les principaux éléments d’une URL :

  • Protocole/Scheme : Définit le mode de communication. https:// indique une connexion sécurisée via HTTPS.
  • Domaine : www.exemple.net est utilisé pour identifier le serveur.
  • Chemin (Path) : demo spécifie la ressource à récupérer sur le serveur.
  • Query String : ?user=1234 contient des paramètres transmis avec la requête.

Cette étape permet au navigateur de préparer la requête réseau.

Étape 2 : Vérification du cache

“tu as bien vidé ton cache ?” - Si c’est une esquive, c’est aussi une réalité.

Avant d’envoyer une requête réseau, le navigateur vérifie si la page ou ses ressources (HTML, CSS, images, JavaScript) sont déjà disponibles dans son cache local afin d’économiser une requête.

Le cache permet de réduire le temps de chargement et l’utilisation du réseau :

  • Si une copie valide est trouvée, elle est directement utilisée.
  • Si le contenu a expiré (selon les directives envoyées par le serveur), une requête réseau est lancée.

Le cache peut inclure des copies partielles ou complètes des ressources, optimisant ainsi le chargement des pages fréquemment visitées.

Étape 3 : Résolution DNS

Si le cache ne contient pas de réponse valide, le navigateur doit traduire le domaine en une adresse IP via le DNS (Domain Name System). Le DNS agit comme un annuaire pour transformer un domaine comme www.exemple.net en une adresse IP comme 93.184.216.34 , car si l’utilisation d’un nom de domaine facilite grandement sa mémorisation, la communication entre un client et un serveur se fait exclusivement avec une adresse IP.

Voici les étapes principales de la résolution DNS :

  1. Le navigateur vérifie son propre cache DNS local.
  2. Si aucune correspondance n’est trouvée, il interroge un serveur DNS récursif (souvent fourni par le FAI).
  3. Ce serveur DNS peut lui-même consulter d’autres serveurs :
    1. Les serveurs racine pour identifier le TLD (Tope Level Domain - ex. .net).
    2. Les serveurs d’autorité pour récupérer l’adresse exacte.
  4. Une fois l’adresse IP obtenue, elle est renvoyée au navigateur.

Ce processus peut impliquer plusieurs requêtes, souvent transmises via UDP.

Étape 4 : Ouverture de la connexion TCP

Avec l’adresse IP en main, le navigateur établit une connexion réseau avec le serveur. Cela passe par le protocole TCP (Transmission Control Protocol), qui garantit une communication fiable grâce au handshake à trois étapes :

  1. Le client envoie un paquet SYN (synchronisation) au serveur.
  2. Le serveur répond avec un paquet SYN-ACK (synchronisation + acquittement).
  3. Le client termine avec un paquet ACK (acquittement).

Pour les connexions sécurisées via HTTPS, un handshake TLS suit immédiatement. Ce dernier utilise des certificats pour authentifier le serveur et chiffrer les échanges.

Étape 5 : Envoi de la requête HTTP

Une fois la connexion TCP ouverte, le navigateur envoie une requête HTTP pour demander la ressource. Cette requête inclut :

  • Méthode : La plupart des requêtes initiales utilisent la méthode GET.
  • En-têtes : Contiennent des métadonnées, comme le type de navigateur (User-Agent) ou les cookies.
  • Paramètres : Transmettent les informations nécessaires au serveur via l’URL ou le corps de la requête (pour POST).

Avec HTTP/2 ou HTTP/3, les navigateurs modernes optimisent ce processus grâce à la multiplexation, permettant de charger plusieurs ressources en parallèle.

Étape 6 : Traitement de la requête par le serveur

Une fois la requête reçue, le serveur effectue les opérations nécessaires pour fournir une réponse :

  1. Identification de la ressource : Le serveur détermine si le fichier demandé existe.
  2. Traitement applicatif : Pour les sites dynamiques, le serveur peut exécuter du code (ex. PHP, Go) et interroger une base de données.
  3. Génération de la réponse HTTP : Inclut le code de statut (200 pour succès, 404 pour non trouvé, etc.) et le contenu demandé.

La réponse est ensuite encapsulée dans des paquets TCP pour être renvoyée au navigateur.

Étape 7 : Réception et affichage des ressources

Lorsque le navigateur reçoit la réponse, il commence immédiatement à traiter les ressources :

  1. Le HTML est analysé pour construire le DOM (Document Object Model), une représentation hiérarchique des éléments de la page.
  2. Les fichiers CSS sont chargés et appliqués pour déterminer le style et la mise en page.
  3. Les scripts JavaScript sont exécutés pour ajouter de l’interactivité.

Ces étapes, appelées parsing, layout et painting, sont gérées par le moteur de rendu du navigateur (comme Blink pour Chrome). Pendant ce temps, des requêtes supplémentaires sont envoyées pour charger les ressources manquantes (images, polices, etc.).