|
Lorsque vous parcourez ou ouvrez une page dans un navigateur Web, vous voyez essentiellement le résultat interprété de plusieurs processus travaillant ensemble. Voici un aperçu de ce qui se passe et de ce que vous finissez par voir :
1. La demande :
* Vous saisissez une URL : Vous saisissez une adresse Web (comme « www.example.com ») dans la barre d'adresse ou cliquez sur un lien.
* Le navigateur envoie une requête : Le navigateur utilise l'URL pour déterminer l'adresse du serveur (via des recherches DNS si nécessaire) et envoie une requête HTTP à ce serveur. Cette requête demande des ressources spécifiques, le plus souvent le fichier HTML qui représente la page Web. Il comprend également des informations telles que votre type de navigateur, vos préférences linguistiques et les cookies.
2. La réponse du serveur :
* Traitement du serveur : Le serveur reçoit la demande. Il le traite, ce qui peut impliquer la récupération de données d'une base de données, l'exécution de scripts côté serveur (comme PHP, Python, Node.js) ou simplement la localisation du fichier demandé sur son stockage.
* Le serveur envoie une réponse : Le serveur renvoie une réponse HTTP. Cette réponse contient :
* En-têtes HTTP : Métadonnées sur la réponse (par exemple, type de contenu, instructions de mise en cache, code d'état tel que 200 OK ou 404 Not Found).
* Le corps de réponse : Le contenu réel de la réponse, qui est le plus probable :
* HTML (langage de balisage hypertexte) : La structure et le contenu de la page Web. Celui-ci définit les titres, paragraphes, liens, images, etc.
* CSS (feuilles de style en cascade) : Les règles de style sur la façon dont les éléments HTML doivent être affichés (couleurs, polices, mise en page, etc.). CSS peut être intégré au HTML, inclus dans des fichiers CSS séparés ou lié à des fichiers CSS externes.
* JavaScript : Code qui ajoute de l'interactivité et un comportement dynamique à la page Web (animations, validation de formulaire, requêtes AJAX, etc.). Comme CSS, JavaScript peut être intégré, inclus dans des fichiers séparés ou lié en externe.
* Autres ressources : Images (JPEG, PNG, GIF, SVG), vidéos, fichiers audio, polices, etc., référencés par HTML, CSS ou JavaScript.
3. Le rendu du navigateur (ce que vous voyez réellement) :
* Analyse : Le navigateur *analyse* le HTML. Il lit le code HTML et construit un *Modèle Objet de Document (DOM)*. Le DOM est une représentation arborescente de la structure HTML en mémoire.
* Construction CSSOM : Le navigateur analyse le CSS et crée un *Modèle d'objet CSS (CSSOM)*. Ceci représente les règles de style appliquées aux éléments HTML.
* Moteur de rendu : C'est le cœur du processus d'affichage du navigateur :
* Combiner DOM et CSSOM : Le navigateur combine le DOM et le CSSOM pour créer un *arbre de rendu*. Cet arbre ne comprend que les éléments visibles et leurs styles.
* Mise en page (Redistribution) : Le navigateur calcule la taille et la position de chaque élément dans l'arbre de rendu. Ceci est connu sous le nom de *layout* ou *reflow*.
* Peinture (Repaint) : Le navigateur *peint* chaque élément à l'écran, en fonction de sa disposition et de ses styles calculés. Cela implique de dessiner le texte, les couleurs, les images, les bordures, etc.
* Exécution JavaScript : Le moteur JavaScript du navigateur (par exemple V8 pour Chrome, SpiderMonkey pour Firefox) exécute le code JavaScript. Ce code peut :
* Modifier le DOM :ajoutez, supprimez ou modifiez des éléments HTML.
* Changer CSS :Modifier les styles des éléments.
* Effectuez des requêtes AJAX :récupérez des données supplémentaires sur le serveur sans recharger la page entière.
* Gérer les événements utilisateur :répondre aux clics, aux saisies au clavier, etc.
Donc, ce que vous *voyez* en fin de compte est le résultat de ce processus complexe :
* Texte formaté : Titres, paragraphes, listes, etc., stylisés selon les règles CSS.
* Images : Affichés aux emplacements spécifiés.
* Liens : Texte ou images sur lesquels vous pouvez cliquer pour accéder à d’autres pages.
* Éléments interactifs : Boutons, formulaires, animations et autres éléments qui répondent à vos actions.
* La mise en page générale et la conception visuelle : L'organisation des éléments sur la page, déterminée par HTML, CSS et JavaScript.
En résumé :
Vous voyez une représentation visuellement attrayante et interactive du contenu fourni par un serveur Web, grâce à la capacité du navigateur à analyser et à restituer HTML, CSS et JavaScript. C'est comme lire une recette (HTML), comprendre comment styliser les ingrédients (CSS), puis ajouter une touche supplémentaire avec une technique spéciale (JavaScript) pour créer un plat délicieux (la page Web).
|
