Comment fonctionne un navigateur ?

Vous vous êtes déjà demandé comment une page se construisait ?

Oui ?

Ca tombe bien, je vous explique !

1. Saisie de l'URL

Le processus commence par la saisie l'URL (Uniform Resource Locator) dans la barre d'adresse de votre navigateur. L'URL peut également être saisie en cliquant sur un lien hypertexte ou en flashant un QR Code.

Spécificités propres aux moteurs de recherche

Les moteurs de recherche eux ne saisissent pas vraiment d’URL, dans le cas de Google il faut plutôt imaginer une liste d’URL que Google veut analyser qu’il va donner en paramètre à un crawler, une brique logicielle dont le seule rôle est d’explorer des URL.

2. Résolution DNS (Domain Name System)

Avant de pouvoir accéder à la page, votre ordinateur doit convertir "www.example.com" en une adresse IP, car les ordinateurs communiquent en utilisant des adresses IP.

• Vérification du cache DNS : votre ordinateur vérifie d'abord son propre cache DNS pour voir s'il a récemment traduit ce domaine.
• Requête au serveur DNS local : si l'adresse n'est pas en cache, une requête est envoyée à un serveur DNS configuré, souvent fourni par votre FAI.
• Requêtes récursives : si le serveur local ne connaît pas l'adresse, il contacte d'autres serveurs DNS, commençant par les serveurs racine (.), puis les serveurs de domaine de premier niveau (dits TLD pour Top Level Dolains)(.com), et enfin le serveur DNS responsable de "example.com".
• Retour de l'adresse IP : une fois l'adresse IP trouvée, elle est renvoyée à votre ordinateur.

3. Établissement de la connexion TCP/IP

Avec l'adresse IP en main, votre navigateur doit maintenant établir une connexion avec le serveur web qui héberge le domaine "www.example.com". Le navigateur et le serveur échangent une série de paquets pour établir une connexion sécurisée et fiable.

4. Envoi de la requête HTTP(S)

Une fois la connexion établie, votre navigateur envoie une requête HTTP ou HTTPS au serveur web pour demander la page web.

Verbe de requête

Le navigateur envoie une requête, spécifiant le slug demandée (par exemple, "GET /index.html HTTP/1.1").

En-têtes de requête

Des informations supplémentaires, comme le type de navigateur (User-Agent), les cookies, et les référents, sont incluses dans les en-têtes de la requête.

5. Réponse du serveur web

Le serveur web reçoit la requête, traite la demande et renvoie une réponse au navigateur.

• Code de statut : un code de statut HTTP, tel que 200 (OK) pour indiquer que la page a été trouvée, ou 404 (Not Found) si elle ne l'est pas.
• En-têtes de réponse : informations sur le serveur, le type de contenu, la date, etc.
• Corps de la réponse : le contenu HTML de la page web demandée.

// En savoir plus : codes de réponse

6. Rendu de la page web

Le navigateur reçoit la réponse et commence à afficher la page web.

6.1 Analyse du HTML

Le navigateur analyse le code HTML pour construire le Document Object Model (DOM).

Pour faire simple : il transforme le texte en code. On parle de parsing.

6.2 Téléchargement des ressources

Pendant l'analyse, le navigateur identifie et télécharge d'autres ressources nécessaires comme les images, les feuilles de style CSS, et les scripts JavaScript.

Il réitère donc toute les étapes 1 à 5

6.3 Exécution des scripts

Les scripts JavaScript sont exécutés, ce qui peut modifier le DOM ou déclencher des téléchargements supplémentaires.

6.4 Application des styles CSS

Les styles sont appliqués au DOM, ce qui détermine l'apparence visuelle de la page. C’est le CSSOM de son petit nom. L’équivalent du DOM en CSS.

6.5 Rendu de la page

Le navigateur combine le DOM avec les styles CSS et les résultats de JavaScript pour afficher la page web à l'écran.

7. Interactions utilisateur et réponses dynamiques

Après que la page soit affichée, les utilisateurs peuvent interagir avec elle. Les interactions peuvent déclencher des événements JavaScript, envoyer de nouvelles requêtes au serveur (par exemple, via AJAX), et mettre à jour dynamiquement le contenu de la page sans recharger entièrement celle-ci

‍