Que se passe-t-il exactement lorsque vous naviguez sur un site Web dans votre navigateur?


64

Que se passe-t-il en coulisse lorsque nous tapons www.cnn.com dans un navigateur et comment l'information est-elle affichée à l'écran?

Une explication technique serait très appréciée.


Vous trouverez une excellente explication technique dans ce livre: Réseaux informatiques: une approche descendante, 6e édition (lien: livre ). (pages 495-500) Ils vont dans beaucoup de détails; à partir de ce qui se passe lorsque l'ordinateur est allumé jusqu'au moment où un site Web est affiché dans le navigateur de l'utilisateur. Vous pouvez avoir un aperçu de ce qui est mentionné dans le livre dans cette série de diapositives. (Lien: Diapositives 88 à 95)
Slothworks

Vous pouvez trouver des informations détaillées ici: github.com/vasanthk/how-web-works ou là html5rocks.com/fr/tutorials/internals/howbrowserswork
mems

Réponses:


134

Navigateur: "Ok, un utilisateur demande cette adresse: www.cnn.com. Je suppose qu’il n’existe aucune barre oblique ni quoi que ce soit, il s’agit d’une requête directe d’une page principale. Aucun protocole ni port n'a été défini, alors je suppose que c'est HTTP et que je vais porter le port 80 ... bon, tout d'abord. Hey DNS, mon ami, réveillez-vous! Où se cache ce www.cnn.com? "

DNS: "Bon ... attendez une seconde, je vais demander aux serveurs du FAI. Ok, ça ressemble à 157.166.226.25."

Navigateur: "Ok. Internet Protocol Suite, à vous de jouer! Appelez le 157.166.226.25, s'il vous plaît. Envoyez-leur cet en-tête HTTP. Il demande la structure de base et le contenu de leur page principale afin que je sache quoi aller chercher ... eh bien, pas que vous vous souciez de ça, je suppose. "

TCP / IP: "Qu'est-ce que tu veux dire à mon tour ? Comme si je ne travaillais pas juste pour le DNS? Mon Dieu, que faut-il pour obtenir un peu de reconnaissance ici ..."

Navigateur: ...

TCP / IP: "Ouais, ouais ... Connexion ... Je vais juste demander à la passerelle de la transmettre. Vous savez, ce n’est pas si facile, je vais devoir diviser votre jolie demande en plusieurs parties Donc, ça va jusqu'au bout, et assembler tout ce qu'ils renvoient parmi les milliers de colis que je reçois ... ah, d'accord, vous vous en fichez. Les chiffres. "

Pendant ce temps, au siège de CNN, un message se termine finalement à la porte du serveur Web.

Serveur Web CNN: "Nzhôô! Un client! Il veut des nouvelles! La page d'accueil! Et vous?"

Moteur de script CNN côté serveur: "Bon, ça ira! Page de garde, n'est-ce pas?"

Serveur de base de données CNN: "Yey! Travaillez pour moi! De quel contenu avez-vous besoin?"

Moteur de script CNN côté serveur: "... euh, désolée DB, j'ai dans ma mémoire cache une copie de la page de couverture, pas besoin de compiler quoi que ce soit. Mais bon, prenez cet ID utilisateur et stockez-le, je vous l'enverrai au client aussi, donc nous savons à qui nous parlons plus tard. "

Serveur de base de données CNN: "Yey!"

De retour à l'ordinateur de l'utilisateur ...

TCP / IP: "Ooookay, voici la réponse. Oh mon Dieu, pourquoi est-ce que j'ai le sentiment que ça va être un gros ..."

Navigateur: "Euh, wow ... cela a toutes sortes de code javascript ... tas d'images, quelques formes ... Bon, ça va prendre du temps à rendre. Mieux vaut y aller. Hey, système IP, Nous avons besoin de quelques feuilles de style de i.cdn.turner.com - via HTTP et nous demandons le fichier /cnn/.element/css/2.0/common.css. puis obtenir certains de ces scripts à i.cdn.turner.com aussi, j'en compte six à ce jour ... "

TCP / IP: "Je comprends la photo. Donnez-moi juste les adresses du serveur et tout ça. Et intégrez ce fichier dans la requête HTTP, je ne veux pas m'en occuper."

DNS: "Vérification du fichier i.cdn.turner.com ... hé, un détail, il s’appelle cdn.cnn.com.c.footprint.net. IP est 4.23.41.126"

Navigateur: "Bien sûr, bien sûr ... attendez une seconde, cela va prendre quelques nsec à traiter, j'essaie de comprendre tout ce script ..."

TCP / IP: "Hé, voici le CSS que vous avez demandé. Oh, et ... oui, ces scripts supplémentaires sont également revenus."

Navigateur: "Ouf, il y a plus… une sorte d'annonce vidéo!"

TCP / IP: "Oh mon Dieu, quel plaisir ça sonne comme ..."

Navigateur: "Il y a aussi toutes sortes d’images! Et ce CSS a l’air un peu méchant ... oui, alors si cette partie-là y passe, et si cette ligne est en haut ... comment serait-ce que cela irait plus ... non Oh, mais cet autre fichier CSS annule cette règle ... Eh bien, celui-ci ne sera pas une pièce facile à restituer, c'est sûr! "

TCP / IP: "Ok, ok, arrêtez de me distraire un instant, il y a encore beaucoup à faire ici."

Navigateur: "Utilisateur, voici un petit rapport d’avancement pour vous. Désolé, tout cela peut prendre quelques secondes, il y a environ 140 éléments différents à charger et jusqu’à 16 à ce jour."

Une ou deux secondes plus tard ...

TCP / IP: "Ok, ça devrait être tout. Hé, écoute ... désolé je t'ai moqué plus tôt, tu gères là-bas? Cela semble être tout à fait une charge pour toi aussi."

Navigateur: "Ouf, oui, ce sont tous ces sites Web de nos jours, ils ne vous facilitent certainement pas la tâche. Eh bien, je vais me débrouiller. C'est pour ça que je suis là."

TCP / IP: "Je suppose que c'est assez lourd pour nous tous ces jours-ci ... oh, arrêtez de jubiler avec le DNS!"

Navigateur: "Hé utilisateur! Le site Web est prêt. Allez chercher vos nouvelles!"


17
C'est ce que mon PC fait après la tombée de la nuit.
Phoshi

7
Grande explication ... Chapeau pour toi ... Bingo ...
Rachel

7
Merveilleux morceau de récit :)
Michael Borgwardt

5
@dex: ... et à ce jour, ils ont encore du succès, réglant toutes les demandes fantaisistes de l'utilisateur avec une diligence digne d'éloges dans les livres d'histoire. Mais, comme toutes choses, un jour, ce sera leur temps de se retirer dans l'obsolescence, laissant place avec élégance à des approches plus modernes adaptées aux temps plus modernes. Mais soyez assurés qu'ils seront toujours là, dans notre héritage, en regardant avec un sourire entendu et en transmettant aux générations futures toutes les dures leçons qu'ils ont apprises au cours de cette période animée de nouvelles communications Internet.
Ilari Kajaste

3
Hourra pour les défaitistes, hein, @wahnfrieden? Je considère que c'est assez précis et informatif.
Jürgen A. Erhard le


18
  • Le navigateur divise ce que vous tapez (l'URL) en un nom d'hôte et un chemin.
  • Le navigateur forme une requête HTTP pour demander les données au nom d’hôte et au chemin donnés.
  • Le navigateur effectue une recherche DNS pour résoudre le nom d'hôte en une adresse IP.
  • Le navigateur établit une connexion TCP / IP avec l’ordinateur spécifié via l’adresse IP. (Cette connexion est en réalité formée par de nombreux ordinateurs, chacun transmettant les données à l'autre.)
  • Le navigateur envoie la requête HTTP via la connexion à l'adresse IP donnée.
  • Cet ordinateur reçoit la requête HTTP de la connexion TCP / IP et la transmet au programme du serveur Web.
  • Le serveur Web lit le nom d'hôte et le chemin d'accès, puis recherche ou génère les données demandées.
  • Le serveur Web génère une réponse HTTP contenant ces données.
  • Le serveur Web envoie cette réponse HTTP à la connexion TCP / IP avec votre machine.
  • Le navigateur reçoit la réponse HTTP et la divise en en-têtes (décrivant les données) et en corps (les données elles-mêmes).
  • Le navigateur interprète les données pour décider de leur affichage dans le navigateur. Il s'agit généralement de données HTML qui spécifient les types d'informations et leur forme générale.
  • Certaines des données seront des métadonnées spécifiant des ressources supplémentaires à charger, telles que des feuilles de style pour une mise en page détaillée, des images en ligne ou des animations Flash. Ces métadonnées sont à nouveau spécifiées sous forme d'URL et l'ensemble du processus est répété jusqu'à ce que toutes soient chargées.

C'est bien, mais il convient de mentionner la mise en cache (sur le navigateur et ailleurs), les mandataires, l'équilibrage de charge, les CDN, etc. Je pense que tous ces éléments sont essentiels pour comprendre comment des sites très sollicités traitent des millions de demandes presque simultanées pour de grandes quantités de contenu.
Sam Dutton

12

La première étape est la recherche DNS (Domain Name Server). Il utilise les serveurs DNS spécifiés dans vos paramètres réseau (ou fournis par DHCP) pour rechercher le domaine supérieur (cnn.com), puis demander au serveur de noms de ce domaine l'adresse IP du sous-domaine spécifié (www.cnn.com).

Une fois l'adresse IP attribuée, votre navigateur commence les communications avec le serveur Web. Ceci est effectué en utilisant le protocole spécifié (qui utilise généralement HTTP 1.1 par défaut). Une requête 'GET' pour '/' est adressée au serveur, qui répond avec le contenu du document HTML et les en-têtes appropriés (qui indiquent au navigateur le type de contenu du document, le code HTML et d'autres informations). Ensuite, le navigateur analyse le document et trouve les URL qu’il a besoin d’incorporer dans la page (comme des images ou des feuilles de style liées) et effectue des requêtes GET sur chacune d’elles.

De plus, le navigateur fait automatiquement une requête GET pour '/favicon.ico' (pour afficher la petite icône CNN à côté du titre du site).

Votre navigateur spécifiera probablement aussi dans les en-têtes de sa demande qu'il souhaite que le contenu de la réponse soit compressé à l'aide de l'algorithme gzip. Cela rend le téléchargement de fichier beaucoup plus petit, si le serveur le prend en charge. Tout cela est transparent pour vous, même s’il s’agit de télécharger un fichier ZIP et de le décompresser.

Lorsque vous rechargez la page, votre navigateur vérifie si cette page est déjà mise en cache dans votre système et, le cas échéant, envoie une requête HTTP uniquement pour l'en-tête du document et vérifie sa date de modification. Si cette date est postérieure à sa copie en cache, il demande à nouveau le contenu complet du document et actualise la page. Sinon, il utilise uniquement votre copie locale.


Le gars ne connaît pas les bases et vous venez de lui exploser avec DNS, DHCP et IP. Expliquons-lui la structure du paquet IP!

6
Il a demandé des détails techniques. Il peut rechercher une adresse IP s'il le souhaite.

Le truc, c'est qu'il ne veut probablement pas regarder quoi que ce soit ... :(

8

Ce qui se passe du côté de CNN manque aussi loin des autres réponses:

  • Une machine de CNN reçoit le message de votre ordinateur demandant la page.
  • Il redirige cette demande vers l'un des nombreux ordinateurs utilisés par CNN pour son site Web (la raison en est que, de cette manière, vous pouvez répartir le travail de compilation des pages Web de réponse sur plusieurs ordinateurs).
  • L’ordinateur de CNN reçoit votre demande et répond avec une page Web qui est probablement presque entièrement pré-calculée, mais peut-être que certaines choses vont changer avant de vous l’envoyer (par exemple, l’annonce en haut, peut-être l’actualité). Parfois, les ordinateurs assemblent la page à partir de nombreux petits composants chaque fois qu'ils reçoivent une demande. pas sûr de ce que fait CNN
  • la réponse se propage à travers le réseau vers votre ordinateur, qui l'affiche ensuite.
  • la réponse n'incluait pas les images: votre ordinateur envoie ensuite une autre demande pour les images, et le même scénario se produit à peu près.

6

Ce n’est évidemment pas une explication technique, mais c’est une jolie aide visuelle (de l’excellent Vladstudio.com ) qui pourrait être utile à certains:

Comment Internet fonctionne


1

Les informations que vous venez de demander pourraient remplir une douzaine de livres. Mais voici ma tentative de l'expliquer: votre navigateur demande à votre système d'exploitation de trouver l'adresse IP de cnn.com. Ensuite, votre système d'exploitation demande à un serveur DNS l'adresse IP de cnn.com. L'IP est envoyé au gestionnaire qui contacte l'adresse IP et demande la page. cnn.com vous envoie ensuite une page HTML. Les navigateurs analysent le code HTML et envoient les informations au rendu HTML. Le navigateur indique ensuite au système d’affichage ce qu’il doit afficher à l’écran.



1

Il y a une vidéo vraiment chouette de "Sendung mit der Maus" (une émission de télévision allemande très populaire qui explique la technologie pour les enfants):

Die Sendung mit der Maus - Wie funktioniert das Internet (Comment Internet fonctionne).

Malheureusement en allemand seulement, mais drôle même sans le texte. Les hommes avec des casques amusants jouent les paquets IP et les données sont écrites sur des cartes papier. Classique :-).

BTW, les explications sont en fait assez bonnes.

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.