0Pricing
Frontend Academy · Leçon

DNS et HTTP dans les navigateurs : cycle de vie d’une requête

Suivez une URL depuis la barre d’adresse, à travers la résolution DNS, la connexion TCP et la requête HTTP, jusqu’à la réponse du serveur renvoyée au navigateur.

DNS et HTTP dans les navigateurs : cycle de vie d’une requête est une leçon Frontend Academy gratuite sur CoddyKit. Ceci est la leçon 1 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Frontend Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Frontend Academy comprend 4 leçons au total.

Que se passe-t-il lorsque vous saisissez une URL ?

Chaque fois que vous consultez un site web, votre navigateur lance une séquence d’étapes précise. Comprendre cette séquence fait de vous un meilleur développeur : vous savez où les problèmes peuvent survenir et comment accélérer le processus.

Étape 1 — Résolution DNS

DNS (système de noms de domaine) est l’annuaire téléphonique d’Internet. Votre navigateur demande à un résolveur DNS : « Quelle adresse IP se cache derrière example.com ? » Le résolveur consulte les caches et, si nécessaire, interroge les serveurs de noms faisant autorité.

# DNS lookup chain
# Browser cache → OS cache → Router cache → ISP resolver → Root NS → TLD NS → Authoritative NS

Étape 2 — Établissement de la connexion TCP

Une fois l’adresse IP connue, le navigateur ouvre une connexion TCP à l’aide de la poignée de main en trois temps : SYN → SYN-ACK → ACK. Pour HTTPS, cette étape est suivie d’une poignée de main TLS qui négocie le chiffrement.

Étape 3 — La requête HTTP

Le navigateur envoie une requête HTTP via la connexion TCP. Elle comprend une méthode (GET, POST…), le chemin (/index.html), la version HTTP et des en-têtes comme Host et Accept.

GET /index.html HTTP/1.1
Host: example.com
Accept: text/html
User-Agent: Mozilla/5.0

Étape 4 — La réponse HTTP

Le serveur traite la requête et renvoie une réponse : un code d’état (200 OK, 404 Page introuvable…), des en-têtes de réponse (Type de contenu, Contrôle du cache) et le corps de la réponse (HTML, JSON, octets d’image).

HTTP/1.1 200 OK
Content-Type: text/html; charset=UTF-8
Content-Length: 1234

<!DOCTYPE html>...

HTTP/1.1, HTTP/2 et HTTP/3

HTTP/1.1 envoie une requête par connexion. HTTP/2 multiplexe de nombreuses requêtes sur une seule connexion. HTTP/3 utilise QUIC (basé sur UDP) pour réduire la latence, en particulier sur les réseaux mobiles instables.

Les codes d’état à connaître

2xx = réussite (200 OK, 201 Créé). 3xx = redirection (301 Déplacé définitivement, 304 Non modifié). 4xx = erreur du client (400, 401, 403, 404). 5xx = erreur du serveur (500, 502, 503).

HTTPS et TLS

HTTPS encapsule HTTP dans TLS (sécurité de la couche transport). TLS fournit le chiffrement, afin que le trafic ne puisse pas être lu, l’authentification par certificats, afin de vérifier que vous communiquez bien avec example.com, et l’intégrité, afin que les données ne soient pas altérées.

Mise en cache : accélérer les visites répétées

Les réponses peuvent inclure Cache-Control: max-age=86400 afin que le navigateur réutilise la copie en cache pendant une journée. Les en-têtes ETag et Last-Modified permettent au navigateur de vérifier si la version en cache est toujours à jour.

Cache-Control: max-age=86400, immutable
ETag: "abc123"
Last-Modified: Wed, 01 Jan 2025 00:00:00 GMT

Cookies et sessions

Les serveurs définissent des cookies avec l’en-tête Set-Cookie. Le navigateur les renvoie automatiquement avec chaque requête vers le même domaine. Les sessions sont généralement constituées d’un cookie contenant un identifiant de session que le serveur associe aux données de l’utilisateur.

CDN — Réseaux de diffusion de contenu

Un CDN stocke des copies de vos ressources dans des centres de données du monde entier. Les utilisateurs téléchargent les ressources depuis le nœud le plus proche, ce qui réduit la latence. Cloudflare, Fastly et AWS CloudFront sont des CDN populaires utilisés par la plupart des grands sites web.

Vérification rapide

Quelle méthode HTTP est utilisée pour demander une page web à un serveur ?

Récapitulatif : le cycle de vie complet d’une requête

URL saisie → DNS traduit le domaine en adresse IP → connexion TCP (+ TLS) établie → le navigateur envoie la requête HTTP → le serveur répond avec un état, des en-têtes et un corps de réponse → le navigateur affiche la réponse. Chaque étape est observable dans le panneau Réseau de DevTools.

Questions Fréquemment Posées

La leçon « DNS et HTTP dans les navigateurs : cycle de vie d’une requête » est-elle gratuite ?

Oui — le texte complet de « DNS et HTTP dans les navigateurs : cycle de vie d’une requête » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Frontend Academy, passe à CoddyKit PRO. Le cours Frontend Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « DNS et HTTP dans les navigateurs : cycle de vie d’une requête » ?

Suivez une URL depuis la barre d’adresse, à travers la résolution DNS, la connexion TCP et la requête HTTP, jusqu’à la réponse du serveur renvoyée au navigateur. Tu pratiques Frontend Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer Frontend Academy ?

Aucune expérience préalable n'est requise. Frontend Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 1 sur 4.

Combien de temps prend la leçon « DNS et HTTP dans les navigateurs : cycle de vie d’une requête » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon Frontend Academy ?

Oui. Chaque leçon Frontend Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

  1. DNS et HTTP dans les navigateurs : cycle de vie d’une requête
  2. HTML, CSS et JavaScript : rôle de chaque couche
  3. Rendu d’une page : analyse, DOM, CSSOM, mise en page et peinture
  4. Outils de développement : ouvrir et utiliser DevTools
← Retour à Frontend Academy