Le parcours d’une requête web, du clic à l’écran

Vous tapez une adresse, vous appuyez sur Entrée, et la page apparaît. Entre les deux, une dizaine d’étapes s’enchaînent en quelques centaines de millisecondes. Les connaître aide à comprendre pourquoi un site est lent, pourquoi une page renvoie une erreur 404 ou pourquoi un script bloque l’affichage. Ce guide suit le trajet décrit par MDN dans « How the web works » et « How browsers load websites ».

Les acteurs : clients, serveurs et la route entre eux

MDN propose une image : Internet est une route. À un bout, le client (votre ordinateur ou téléphone, et son navigateur) ; à l’autre, le serveur, un ordinateur qui stocke des pages, sites ou applications. Pour que les données circulent, il faut :

• une connexion Internet ;
• TCP/IP, les protocoles qui définissent comment les données voyagent ;
• le DNS, l’annuaire des sites ;
• HTTP, le langage commun entre client et serveur ;
• des fichiers : du code (HTML, CSS, JavaScript) et des ressources (images, vidéos, PDF…).

Pour situer ces briques dans une application, voyez aussi la différence entre front-end et back-end.

Étape 1 : décomposer l’adresse

Une adresse saisie fait partie d’une URL. Prenons https://developer.mozilla.org/en-US/ :

Selon MDN, sur le web moderne presque tous les serveurs utilisent HTTPS : si vous ne l’écrivez pas, le navigateur l’ajoute. Pour comprendre ce que HTTPS protège, lisez comment fonctionne HTTPS.

Étape 2 : le DNS trouve le serveur

Les vraies adresses sont des adresses IP, des suites de chiffres comme 192.0.2.172. Le DNS (Domain Name System) fait la correspondance entre le nom que vous tapez et l’adresse IP du serveur. MDN précise que les grands sites sont souvent disponibles sur plusieurs serveurs : l’adresse IP obtenue peut donc varier selon l’endroit où vous vous trouvez.

Étape 3 : la requête HTTP

Le navigateur envoie un message HTTP au serveur pour lui demander une copie du site. Ce message, comme toutes les données échangées, circule via TCP/IP. Une requête GET minimale ressemble à ceci :

GET /en-US/ HTTP/2
Host: developer.mozilla.org

La première ligne contient la méthode (GET), le chemin et la version de HTTP ; les en-têtes qui suivent ajoutent des informations, comme l’hôte visé. GET est la méthode normalement utilisée pour demander une page.

Étape 4 : la réponse du serveur

Si le serveur accepte la demande, il répond avec un code de statut, typiquement 200, puis envoie les fichiers sous forme de petits morceaux appelés paquets. La réponse comprend :

• la version de HTTP et le code de statut ;
• des en-têtes (date, taille, type de contenu, mise en cache…) ;
• le corps de la réponse, ici le document HTML.

MDN explique pourquoi on découpe en paquets : ils peuvent être perdus ou corrompus, et il est plus rapide de redemander un paquet manquant qu’un fichier entier ; ils peuvent aussi emprunter des chemins différents et arriver dans le désordre, le client les remettant dans l’ordre grâce aux informations de leur en-tête.

Les codes de statut à connaître

Étape 5 : le navigateur assemble la page

Les réponses contiennent généralement du HTML (contenu et structure), du CSS (style et mise en page), du JavaScript (comportement) et des médias. L’assemblage s’appelle le rendu.

1. Le HTML est analysé et converti en arbre appelé DOM : chaque élément, attribut et texte devient un nœud.
2. Certains éléments déclenchent d’autres requêtes HTTP : <link> pour une feuille de style, <script> pour un fichier JavaScript, <img>, <video> ou <audio> pour des médias.
3. Le CSS est analysé : le navigateur trie les règles selon les éléments concernés et attache les styles, ce qui donne un arbre de rendu.
4. L’arbre de rendu est mis en page (layout), images comprises.
5. Le résultat est affiché à l’écran : c’est la phase de peinture (painting).
6. Le JavaScript est ensuite pris en charge, et peut modifier le DOM.

MDN prévient que cette description est simplifiée et que chaque navigateur gère le processus à sa manière. Pour manipuler cet arbre depuis un script, voyez le DOM en JavaScript.

Ce que ce parcours explique en pratique

Un site qui charge beaucoup de ressources enchaîne autant de requêtes supplémentaires : c’est l’une des pistes pour améliorer la vitesse d’un site web. Pour les méthodes de mesure, voyez mesurer la performance : lab et terrain.

Observer le parcours soi-même

Les navigateurs modernes proposent des outils pour surveiller les requêtes réseau. MDN mentionne, pour Firefox, le « Network Monitor ». Ouvrez-le, rechargez une page, et vous verrez les requêtes de chaque ressource, leur code de statut et leur durée. C’est la meilleure façon de vérifier ce que ce guide décrit.

Besoin d’un regard expert sur vos pages ? Yunt Audit propose des diagnostics techniques.

Conclusion

Du clic à l’écran, une page web traverse l’analyse de l’URL, la résolution DNS, la requête HTTP, la réponse du serveur en paquets, puis le rendu du HTML, du CSS et du JavaScript. Chaque étape peut échouer ou ralentir : savoir la nommer, c’est savoir où chercher.

FAQ

Que fait le DNS ?

Il associe un nom de domaine (comme mozilla.org) à l’adresse IP du serveur, afin que le navigateur sache où envoyer sa requête.

Que signifie le code 301 ?

La ressource a été déplacée de façon permanente vers une nouvelle adresse, fournie dans la réponse. On l’utilise pour rediriger un contenu déplacé.

Pourquoi les données sont-elles envoyées en paquets ?

Parce qu’un paquet perdu ou corrompu se redemande plus vite qu’un fichier entier, et que les paquets peuvent emprunter des chemins différents.

Qu’est-ce que le DOM ?

L’arbre construit par le navigateur à partir du HTML : chaque élément, attribut et texte y devient un nœud.