web-dev-qa-db-fra.com

Décrire le processus de rendu de page dans un navigateur?

Tout d'abord, je ne suis pas intéressé par l'ensemble du processus de demande-réponse tel que traité par cette question

Quel est le processus complet pour entrer une URL dans la barre d'adresse du navigateur pour obtenir la page rendue dans le navigateur?

Je veux savoir ce qui se passe à l'intérieur d'un navigateur, une fois qu'il reçoit la réponse html du serveur. L'intention derrière cette question est de comprendre les détails internes des scripts côté client. Il serait également avantageux d'expliquer de manière abstraite en quoi consiste un navigateur Web. Vous pouvez les appeler comme moteur CSS, moteur javascript, etc. Le but est de visualiser précisément le développement web que je fais.

Malheureusement, je n'ai trouvé aucune ressource Web pour résoudre ce problème. Veuillez me pardonner s'il existe des ressources qui expliquent ces concepts. Vous pouvez indiquer les ressources (livres, etc.) si cette question est trop exhaustive pour y répondre.

javascriptcssbrowserrenderingclient-side
37
pphanireddy

Veuillez suivre les étapes ci-dessous et vous devriez être clair avec le cycle de vie des demandes et comment la réponse est rendue.

  1. Vous saisissez une URL dans la barre d'adresse de votre navigateur préféré.

  2. Le navigateur analyse l'URL pour trouver le protocole, l'hôte, le port et le chemin.

  3. Il forme une requête HTTP (qui était très probablement le protocole)

  4. Pour atteindre l'hôte, il doit d'abord traduire l'hôte lisible par l'homme en un numéro IP, et il le fait en effectuant une recherche DNS sur l'hôte

  5. Ensuite, un socket doit être ouvert depuis l'ordinateur de l'utilisateur vers ce numéro IP, sur le port spécifié (le plus souvent le port 80)

  6. Lorsqu'une connexion est ouverte, la demande HTTP est envoyée à l'hôte. L'hôte transmet la demande au logiciel serveur (le plus souvent Apache) configuré pour écouter sur le port spécifié.

  7. Le serveur inspecte la requête (le plus souvent uniquement le chemin), et lance le plugin serveur nécessaire pour gérer la requête (correspondant au langage serveur que vous utilisez, PHP, Java, .NET, Python?)

  8. Le plugin obtient l'accès à la demande complète et commence à préparer une réponse HTTP.

  9. Pour construire la réponse, une base de données est (très probablement) accessible. Une recherche dans la base de données est effectuée, en fonction des paramètres du chemin (ou des données) de la demande

  10. Les données de la base de données, ainsi que d'autres informations que le plugin décide d'ajouter, sont combinées en une longue chaîne de texte (probablement HTML).

  11. Le plugin combine ces données avec certaines métadonnées (sous la forme d'en-têtes HTTP) et renvoie la réponse HTTP au navigateur.

  12. Le navigateur reçoit la réponse et analyse le code HTML (qui avec une probabilité de 95% est cassé) dans la réponse

  13. Un arbre DOM est construit à partir du HTML cassé

  14. De nouvelles demandes sont adressées au serveur pour chaque nouvelle ressource trouvée dans la source HTML (généralement des images, des feuilles de style et des fichiers JavaScript).

  15. Revenez à l'étape 3 et répétez l'opération pour chaque ressource.

  16. Les feuilles de style sont analysées et les informations de rendu de chacune sont attachées au nœud correspondant dans l'arborescence DOM

  17. JavaScript est analysé et exécuté, et les nœuds DOM sont déplacés et les informations de style sont mises à jour en conséquence

  18. Le navigateur affiche la page à l'écran en fonction de l'arborescence DOM et des informations de style pour chaque nœud

  19. Vous voyez la page à l'écran

  20. Vous vous ennuyez tout le processus a été trop lent.

17
Subhash Chandra

Un excellent discours du David Baron de Mozilla en discute en détail. Il s'agit d'une vidéo intitulée Faster HTML and CSS: Layout Engine Internals for Web Developers , et elle vous guide à travers les cinq étapes du rendu d'une arborescence DOM à l'écran:

  1. Construire le DOM
  2. Calculer les styles
  3. Construire l'arbre de rendu
  4. Disposition de calcul
  5. Peindre
4
Chris Calo

Je vais essayer d'expliquer le processus de rendu de page en profondeur. Veuillez noter que je ne me concentre pas sur le processus de demande-réponse comme l'OP l'a demandé dans la question.

Une fois que le serveur fournit les ressources (HTML, CSS, JS, images, etc.) au navigateur, il subit le processus ci-dessous:

Analyse - HTML, CSS, JS
Rendu - Construire un arbre DOM → Arbre de rendu → Disposition de l'arbre de rendu → Peinture de l'arbre de rendu

  1. Le moteur de rendu commence à obtenir le contenu du document demandé à partir de la couche réseau. Cela se fera généralement en morceaux de 8 Ko.
  2. Un arbre DOM est construit à partir de la réponse rompue.
  3. De nouvelles demandes sont adressées au serveur pour chaque nouvelle ressource trouvée dans la source HTML (généralement des images, des feuilles de style et des fichiers JavaScript).
  4. À ce stade, le navigateur marque le document comme interactif et commence l'analyse des scripts qui sont en mode "différé": ceux qui doivent être exécutés après l'analyse du document. L'état du document est défini sur "terminé" et un événement "charge" est déclenché.
  5. Chaque fichier CSS est analysé dans un objet StyleSheet, où chaque objet contient des règles CSS avec des sélecteurs et des objets correspondant à la grammaire CSS. L'arbre construit s'appelle CSSCOM.
  6. En plus de DOM et CSSOM, un arbre de rendu est créé, qui est un ensemble d'objets à rendre. Chacun des objets de rendu contient son objet DOM correspondant (ou un bloc de texte) plus les styles calculés. En d'autres termes, l'arbre de rendu décrit la représentation visuelle d'un DOM.
  7. Après la construction de l'arbre de rendu, il passe par un processus de "mise en page". Cela signifie donner à chaque nœud les coordonnées exactes à l'endroit où elles devraient apparaître à l'écran.
  8. L'étape suivante consiste à peindre: l'arborescence de rendu sera traversée et chaque nœud sera peint à l'aide de la couche d'arrière-plan de l'interface utilisateur.
  9. Repeindre: lorsque vous modifiez des styles d'élément qui n'affectent pas la position de l'élément sur une page (comme la couleur d'arrière-plan, la couleur de la bordure, la visibilité), le navigateur repeint à nouveau l'élément avec les nouveaux styles appliqués (cela signifie un "repeindre" ou "restyle" se produit).
  10. Redistribution: lorsque les modifications affectent le contenu ou la structure du document ou la position de l'élément, une refusion (ou une sortie relais) se produit.

Quelle est la structure interne d'un navigateur Web? browser structure
Pour comprendre le processus de rendu de page expliqué dans les points ci-dessus, nous devons également comprendre la structure d'un navigateur Web.

Interface utilisateur: L'interface utilisateur comprend la barre d'adresse, le bouton Précédent/Suivant, le menu des signets, etc. Chaque partie du navigateur s'affiche sauf la fenêtre où vous voir la page demandée.
Moteur de navigateur: Le moteur de navigateur organise les actions entre l'interface utilisateur et le moteur de rendu.
Moteur de rendu: Le moteur de rendu est responsable de l'affichage du contenu demandé. Par exemple, si le contenu demandé est HTML, le moteur de rendu analyse HTML et CSS et affiche le contenu analysé à l'écran.
Mise en réseau: La mise en réseau gère les appels réseau tels que les requêtes HTTP, en utilisant différentes implémentations pour différentes plates-formes derrière une interface indépendante de la plate-forme.
Backend UI: Le backend UI est utilisé pour dessiner des widgets de base comme des combo box et des fenêtres. Ce backend expose une interface générique qui n'est pas spécifique à la plateforme. En dessous, il utilise des méthodes d'interface utilisateur du système d'exploitation.
Moteur JavaScript: Le moteur JavaScript est utilisé pour analyser et exécuter du code JavaScript.
Stockage de données: Le stockage de données est une couche de persistance. Le navigateur peut avoir besoin d'enregistrer localement toutes sortes de données, telles que les cookies. Les navigateurs prennent également en charge des mécanismes de stockage tels que localStorage, IndexedDB, WebSQL et FileSystem.

Remarque:
Pendant le processus de rendu, les couches de calcul graphique peuvent également utiliser le CPU à usage général ou le processeur graphique GPU. Lors de l'utilisation du GPU pour les calculs de rendu graphique, les couches logicielles graphiques divisent la tâche en plusieurs parties, de sorte qu'il peut tirer parti du parallélisme massif du GPU pour les calculs de virgule flottante requis pour le processus de rendu.

Liens utiles:
1. https://github.com/alex/what-happens-when
2. https://codeburst.io/how-browsers-work-6350a4234634

2
Shwetabh Shekhar