Ne vous êtes-vous jamais demandé tout ce qu’il se passait lorsque vous dégainiez votre navigateur web ? Cet article ne se veux pas
absolument exhaustif et prendra quelques raccourcis par moment afin de rester compréhensif et concis. D’ailleurs je n’aborderai que le protocole IP en version 4 mais en dehors de points très techniques, tout s’applique également au protocole IP en version 6. Et je n’aborderai pas non plus le protocole HTTP/2. D’ailleurs je n’aborde pas non plus la partie routage IP qui mérite un article rien que pour elle. Donc vous entrez l’adresse
iloth.net/2016/10/ce-quil-se-passe-quand-on-ouvre-une-page-web/ dans votre barre d’adresse. Jusque là, il n’y a pas eu de connexion extérieure. Pour l’instant tout ce qui s’est passé est à peu près instantané. Bon, le navigateur sait quel serveur contacter mais il ne sait pas où ce serveur se trouve. Sur Internet, toutes les machines communiquent via le protocole IP (Internet Protocol). Dans ce protocole, chaque machine possède (au minimum) une adresse
IP. Ces adresses doivent être uniques, c’est à dire que sur tout le réseau Internet, il ne peut pas y avoir deux machines avec la même adresse IP. Ces adresses sont de la forme a.b.c.d où a,b,c et d sont des chiffres allant de 0 à 255. Quelques exemples d’ip : 1.2.3.4, 120.32.21.68, 89.234.152.131, … Bref vous voyez le truc. “Quelle est l’IP correspondant à iloth.net ? Votre navigateur va donc demander à votre système d’exploitation quel serveur DNS il doit consulter puis faire sa requête. Donc la première connexion que votre navigateur effectue n’est donc pas une connexion au serveur web consulté mais une connexion au serveur dns qu’a indiqué votre système d’exploitation. Cette étape peut déjà prendre un temps non négligeable puisqu’il va falloir envoyer la requête DNS et attendre la réponse. 3 – Connexion au serveur WEBMaintenant votre navigateur connait l’hôte, la page demandée et l’adresse IP à contacter. Il a tout ce qu’il lui faut pour établir la connexion au niveau TCP. Transimssion Control Protocol est un protocole dit “de connexion” au dessus d’IP.
Là ça devient un peu technique mais en gros ça permet d’être sûr que tout ce qu’envoie le client est bien reçu par serveur sans erreur, et vice versa. Le protocole IP utilise des adresses (IP), le protocole TCP utilise lui des ports. HTTP utilise par défaut le port 80 donc si on ne le spécifie pas au navigateur, celui-ci utilisera de lui même le port 80 (443 pour l’HTTPS). Client: J’aimerais me connecter à votre port 80 Donc voilà il y a eu trois paquets qui se sont baladés entre les ordinateurs pour établir la connexion. Et pourtant vous ne vous êtes pas encore échangé d’information. Le logiciel du serveur WEB n’a encore rien fait et votre
navigateur pas grand chose pour sa part. Par contre encore un peu plus de temps s’est écoulé, mais ce coup-ci vous êtes connecté directement à la machine que vous voulez. 4 – Requête HTTPLe navigateur rédige la requête HTTP qu’il va envoyer au serveur web. GET
/2016/10/ce-quil-se-passe-quand-on-ouvre-une-page-web/ HTTP/1.1 Regardons un peu de plus près ce que ça contient. C’est une requête de type GET, donc il demande une page web /2016/10/ce-quil-se-passe-quand-on-ouvre-une-page-web/ . Ce champ est obligatoire. 5 – Génération de la page webIl existe de très nombreux langages de programmation pour générer des pages web. Je n’aborderai que le cas le plus simple et le plus répandu, celui de PHP. 6 – Réponse HTTPSans trop de surprise, le navigateur reçoit la réponse à sa requête avec d’abord les entêtes puis les données : HTTP/1.1 200 OK J’ai volontairement occulté certains entêtes histoire de simplifier. À ce stade le serveur a fini son travail : il a répondu (positivement ou non) à la requête du navigateur et désormais attend d’autres requêtes. Il s’est donc passé pas mal de temps ce coup-ci car les données doivent prendre le temps de circuler. 7 – Parser la page webLe navigateur va donc recevoir du texte formaté en HTML. Il s’agit d’un langage de description assez simple fonctionnant avec des balises. Donc le navigateur va lire tout le texte et transformer ce texte en une vraie page web. Il va donc analyser les balises pour afficher non pas uniquement du texte mais également afficher des liens, des images, des vidéos… D’ailleurs en parlant d’image et de vidéos, il va avoir pas mal de boulot votre navigateur. En effet les données des images n’ont pas été transférées : une page web ne contient pas l’image en elle même mais en fait possède uniquement un lien vers celles-ci (pareil pour les vidéos ou les sons). C’est là toute la force de l’hypertexte : une page web n’est en fait que du texte contenant divers liens vers des documents épars. Pour chaque document, votre navigateur va devoir recommencer à l’étape 1 ( décoder la requête ), puis éventuellement passer à l’étape 2 si l’hôte n’est pas le même que pour la page ( faire la résolution dns pour connaitre l’ip de l’hôte du document )… jusqu’à l’étape 7 pour inclure les documents dans la page web. C’est pour cela que plus une page contient des documents plus elle est longue à afficher. Donc votre navigateur va faire non pas une requête et hop c’est fini mais une requête pour la page demandée puis une requête par document inclus dans la page (chaque image, chaque script, chaque fichier, …). Une page moderne classique atteint assez fréquemment les 100 requêtes nécessaires. Ça représente pas mal de boulot ! Et plus le temps passe plus le poids de tout ce qui est inclus grandit au point qu’une connexion de 2Mbps autrefois très rapide commence à montrer ses limites désormais. Il est d’ailleurs intéressant de noter que la page web peut inclure des documents qui ne sont pas hébergés sur le même serveur web. Tous les sites web intègrent désormais du contenu issus de nombreux acteurs divers et variés : des images hébergées dans un cdn (prestataire servant du contenu à haute vitesse à travers le monde), des pubs issues d’une ou plusieurs régies publicitaires, des icônes et scripts issus de site communautaires (boutons facebook, youtube, twitter, pinterest,…), des trackers statistiques (google analytics, piwik,…). Bref quand vous ouvrez une page web pour un site précis, il y a fort à parier que vous vous connectez également à des dizaines de serveurs divers et variés. Et c’est d’ailleurs là, la force de facebook, twitter, google. Tous les webmasters ont recours à eux histoire de générer des statistiques, ajouter des fonctionnalités plus ou moins utiles, générer un revenu. Du coup vous êtes constamment traqués. Une fois que notre navigateur a ramassé tous les fichiers nécessaires, il va passer à la suite. 8 – Afficher la page – Exécuter les scriptsIl y a de fortes chances que la page web demandée fasse appel à ce qu’on apelle une feuille de style CSS. Le Cascading Style Sheet est le découplage du fond et de la forme ! Le
fond c’est le texte qui est dans le HTML et le CSS c’est donc la forme. Le CSS est un fichier texte qui indique comment le navigateur doit dessiner la page web. Quel couleur a le texte, le fond, où placer le menu, quelle décoration appliquer au lien, quelle police d’écriture pour tel ou tel élément… tout un tas de règle qui vont définir le rendu de votre page web. C’est aussi là-dedans qu’on fait en sorte que la page web s’adapte à l’affichage sur divers type d’appareils (ordinateur, téléphone,
tablette, télévision, montre,…). Après avoir lu ce fichier, le navigateur va télécharger les polices d’écritures manquantes (c’est pour cela que le texte change pendant le chargement de la page). Au début, on se contentait de changer une image pour faire une galerie d’images. Puis on a vu apparaitre la possibilité d’aller chercher des données pour afficher des morceaux de pages web supplémentaires. On s’en sert pour vérifier la validité des données dans un formulaire (est-ce bien une date que vous avez entré ? le mot de passe que vous utilisez est-il assez fort ? …). Désormais certaines pages web sont si complexes qu’elles ressemblent à des logiciels. Il est désormais assez commun d’utiliser un traitement de texte directement dans son navigateur. Le navigateur étant à la charge d’exécuter le javascript, la performance de ce traitement est devenue un argument de vente pour les navigateurs. Voilà, je pense qu’on a fait un survol plutôt complet de ce qu’il se passe. Il est possible que j’aie un peu abrégé certaines étapes, voire ignoré certaines, mais globalement voilà ce qu’il se passe. mise à jour : renumérotation des paragraphes Comment voir les messages échangés entre le navigateur et le site web ?Une requête POST se différencie d'une requête GET par le fait que le navigateur envoie des données au serveur. Ces données sont visibles dans le panneau de détail : dans l'onglet Parameters / Paramètres sous Firefox, en bas de l'onglet Headers / En-têtes sous Chrome.
Quel type de protocole est HTTP ?HTTP est un protocole qui permet de récupérer des ressources telles que des documents HTML. Il est à la base de tout échange de données sur le Web. C'est un protocole de type client-serveur, ce qui signifie que les requêtes sont initiées par le destinataire (qui est généralement un navigateur web).
Quel est le rôle de navigateur web ?le navigateur envoie une requête HTTP au serveur pour lui demander d'envoyer une copie du site web au client (vous allez au magasin et vous passez commande). Ce message, et les autres données envoyées entre le client et le serveur, sont échangés par l'intermédiaire de la connexion internet en utilisant TCP/IP.
Comment fonctionnent les échanges entre un serveur de site web et les internautes qui le consultent ?Tout comme dans un restaurant, le client formule des requêtes à un serveur lequel lui répond en lui envoyant (servant) un résultat. Soit le résultat correspond à la requête formulée, soit le client reçoit un message d'erreur du type "le serveur n'a pas trouvé la page demandée".
|