Fonctionnement du Web, partie 2 : que se passe-t-il lorsque vous visitez une URL ?

Publié: 2016-12-06

Dans le post précédent, nous avons parlé de la naissance du Web. Dans cet article, nous allons faire un tour et voir ce qui se passe lorsque vous visitez une URL avec votre navigateur. Nous examinerons également les technologies contemporaines utilisées sur le Web et comment elles s'imbriquent toutes.

Les technologies impliquées, à partir du moment où vous appuyez sur le bouton Entrée jusqu'à la consultation d'une page Web, sont nombreuses. Dans notre article précédent, nous avons parlé d'hypertexte et de HTTP, mais ce n'était que le début :

Les serveurs Web (comme apache2 et nginx) implémentent le protocole HTTP ainsi que d'autres fonctions, qui permettent aux navigateurs Web de se connecter, de demander et de recevoir des données Web. HTTP est le canal par lequel les messages, les pages Web, les images et les ressources « voyagent » entre un serveur Web et un navigateur.

Le Web moderne est assez exigeant et les serveurs Web modernes ont relevé ce défi. L'évolutivité et la sécurité sont les deux principales préoccupations du monde d'aujourd'hui. Les serveurs Web modernes sont hautement évolutifs (capables de gérer plus de 10 000 connexions simultanées), offrent plusieurs options d'équilibrage de charge, prennent en charge SSL/TLS et HTTP/2. La principale amélioration de HTTP/2 par rapport à HTTP/1.1 est, sans aucun doute, la gestion supérieure du streaming de paquets. Le streaming vidéo est omniprésent aujourd'hui et HTTP/1.1 ne pouvait pas gérer de manière adéquate les besoins de tous les différents appareils, capacités de réseau et nombre d'utilisateurs Web en ligne d'aujourd'hui.

HTML (HyperText Markup Language) est un langage qui utilise des balises pour représenter des documents hypertextes structurés pouvant être compris par votre navigateur Web.

Sa dernière incarnation, HTML5, a introduit de nombreuses améliorations et nettoyages de langage, mais les ajouts les plus impressionnants étaient la prise en charge native de la vidéo et de l'audio, les graphiques 2D et 3D, ainsi que le stockage de base de données locale. Ces améliorations ont effectivement rendu obsolètes les technologies multimédia telles que Flash et Silverlight.

CSS (Cascading Style-sheets) est une technologie utilisée par les concepteurs de sites Web pour faciliter les modifications visuelles sur de nombreuses pages Web.

Le code CSS peut soit résider dans HTML, soit, comme c'est généralement le cas, constituer des fichiers séparés, référencés par la page HTML. L'utilité du CSS est qu'il sépare le contenu de la présentation, offrant aux concepteurs Web un outil puissant pour gérer de manière centralisée tous les détails esthétiques d'un site Web.

Le back-end (par exemple PHP ou Java) est un code mélangé avec du HTML, qui est exécuté par le serveur Web lorsque le calcul est terminé.

De nos jours, tous les sites Web sont dynamiques ; ce qui signifie qu'il n'y a plus de fichiers .html simples servis au navigateur. Tous les langages modernes, avec l'ajout de bibliothèques logicielles appelées frameworks Web, peuvent être utilisés comme solution back-end pour un site Web. La récente version de PHP 7 et les brillantes améliorations de performances et fonctionnalités qu'il a introduites, ainsi que le HHVM de Facebook, ont tous deux fait passer l'ensemble du processus au niveau supérieur.

Le front-end (Javascript) est également du code mélangé avec du HTML mais il est exécuté localement sur votre ordinateur, par votre navigateur web.

Javascript est peut-être le développement le plus étonnant et le plus impressionnant du Web moderne. Il est passé du simple frère cadet de Java, utilisé pour créer des menus et afficher des fenêtres contextuelles, à un langage de programmation puissant utilisé à la fois dans le client et le serveur. De nos jours, il peut tout faire sur un navigateur Web et à grande vitesse. Le moteur Javascript V8 de Google a changé la donne technologiquement.

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

Le Web est une corne d'abondance de technologies différentes, mais il existe deux concepts dont la fonction de base est restée inchangée, même aujourd'hui. Le navigateur Web et le serveur Web. Ceux-ci fonctionnent sur le « vieux » modèle client/serveur qui est le suivant : Un client se connecte à un serveur en utilisant une adresse (une IP ou un nom), et demande quelque chose. Le serveur répond alors au client et ainsi de suite. Les clients se connectent aux serveurs, mais pas l'inverse. Bien que la technologie Web d'aujourd'hui ait considérablement modifié ce modèle, nous allons l'utiliser pour expliquer le processus de manière simplifiée.

Ainsi, vous lancez votre navigateur préféré et visitez une page Web. À partir du moment où vous appuyez sur la touche Entrée jusqu'au moment où vous voyez enfin la page affichée, les choses suivantes se produisent :

Votre navigateur appelle d'abord un module logiciel appelé résolveur DNS qui est configuré sur votre ordinateur et demande l'adresse IP qui correspond à l'URL que vous avez saisie.
DNS (Domain Name System) est un service Internet de base qui mappe les noms d'ordinateurs (comme www.pressidium.com ) en adresses IP. Les adresses IP sont ce que les ordinateurs connectés à Internet comprennent et auxquels ils peuvent se connecter. Nous allons explorer ce que c'est et comment cela fonctionne dans notre prochain article.
Votre navigateur initie alors une connexion à cette adresse IP, en utilisant le port 80 ou 443.
L'adresse IP signifie le serveur, tandis que le numéro de port fait référence au service auquel vous souhaitez vous connecter. Tous les serveurs Web fonctionnent par défaut sur le port 80, tandis que le port 443 est utilisé pour les connexions Web sécurisées.
Le serveur Web traite l'URL que vous avez saisie et donne le contrôle au back-end. Le code back-end génère la page HTML et la transmet au serveur Web. Le serveur Web envoie alors enfin la page HTML au navigateur, via le canal HTTP.
Il se passe beaucoup de choses dans les millisecondes nécessaires au serveur Web pour renvoyer le code HTML. Le code back-end d'un site Web se connecte généralement à une base de données, exécute des requêtes, récupère les données, contacte d'autres services back-end et finalement assemble le tout dans un document HTML. Ce n'est pas vraiment un fichier discret que vous demandez, mais une ressource dynamique , qui est généré à la volée à l'aide d'une grande variété de technologies et de composants différents.
Votre navigateur Web reçoit la page HTML, ferme la connexion au serveur Web, puis l'affiche sur votre écran. Il exécute le code Javascript présent dans le HTML. La conception Web moderne suit une approche appelée Responsive Design. Cette approche utilise HTML, CSS et Javascript pour adapter dynamiquement la mise en page d'une page Web, en fonction de l'appareil que vous utilisez pour la navigation. Cela est devenu très important de nos jours avec la croissance explosive des appareils mobiles et des tablettes.

Et après?

Jusqu'à présent, nous avons brièvement abordé diverses technologies Web modernes et ce qui se passe lorsque vous visitez une URL. Sans aucun doute, les technologies Web sont complexes et nombreuses, et ne peuvent être couvertes de manière satisfaisante dans un seul article. Avec cette série d'articles, nous visons principalement à vous donner une vue d'ensemble d'Internet et du Web.
Dans le prochain épisode de cette série intéressante, nous visiterons une autre infrastructure Internet importante, le système de noms de domaine. Sans cela, rien ne fonctionnerait vraiment ! (du moins pour nous les humains).