Comment fonctionne la séquence de cycle de vie des pages du navigateur?
Souhaitez-vous créer une présentation sur le fonctionnement du navigateur, quelqu'un connaît-il la séquence exacte du cycle de vie qui se produit chaque fois qu'une URL de navigateur est demandée?
Quelles sont les étapes qui se produisent après la réception d'une réponse du serveur en termes de:
- Rendu - Application de filtres CSS, webkit etc ...
- Javascript - Chargement et exécution
- Application CSS
- Construction du DOM/à quel moment le DOM est-il écrit et comment?
- Biscuits
- Autres activités liées au réseau, etc.
- pas tranquille si c'est même le bon ordre ...
est-ce la même chose dans tous les navigateurs ou différents navigateurs ont des cycles de vie différents?
Remarque - une réponse bien écrite avec des détails expliquant chaque étape par Ced ci-dessous. ce que je cherchais en fait était "Chemin critique de rendu" - les étapes générales du processus sont bien expliquées par d'autres bonnes réponses.
Dieu merci, et bon travail à tous!
Ce dont vous parlez est le Chemin de rendu critique.
Les points 1., 3. et 4. peuvent être repris comme tels:
- Construction du modèle d'objet de document (DOM)
- Construction d'un modèle d'objet CSS (CSSOM)
- Construction de l'arbre de rendu
- Disposition
- Peindre.
Voici une ventilation de ce qui se passe derrière la scène.
1. Construire l'objet DOM.
La première étape consiste à créer le DOM. En effet, ce que vous recevez du réseau sont des octets et le navigateur utilise la soi-disant arborescence DOM. Il doit donc convertir ces octets en arborescence DOM.
- Vous recevez la page en octets. Votre navigateur le convertit en texte.
- Le texte est converti en nœuds.
- les nœuds sont convertis en "objets"
- Construction de l'arbre, appelé le DOM TREE.
Vous pouvez vérifier l'outil développeur pour voir combien de temps cela prend.
Ici, nous pouvons voir qu'il a fallu 4,938 ms.
Lorsque ce processus est terminé, le navigateur aura le contenu complet de la page, mais pour pouvoir rendre le navigateur, il doit attendre le modèle d'objet CSS, également appelé événement CSSOM, qui indiquera au navigateur à quoi les éléments devraient ressembler. une fois rendu.
2. Manipulation du CSS
Pour le CSS, c'est la même chose que ci-dessus, le navigateur doit convertir ces fichiers en CSSOM:
Le CSS est également une structure arborescente. En effet, si vous mettez une taille de police à l'élément parent, les enfants en hériteront.
C'est ce qu'on appelle le style recalculé dans l'outil de développement
CSS est l'un des éléments les plus importants du chemin de rendu critique, car le navigateur bloque le rendu de page jusqu'à ce qu'il reçoive et traite tous les fichiers CSS de votre page, CSS bloque le rendu
3. Arbre de rendu
CSSOM ET DOM sont combinés pour l'affichage.
4. Disposition
Tout doit être calculé en pixels. Ainsi, lorsque vous dites qu'un élément a une largeur de 50%, le navigateur derrière la scène le transforme en pixels:
Chaque fois qu'une mise à jour de l'arborescence de rendu est effectuée ou que la taille de la fenêtre change, le navigateur doit réexécuter la disposition.
5.Peinture
L'étape consiste à convertir tout cela en pixels à l'écran. Ceci est l'étape Paint.
Javascript
Pour le cycle de vie JavaScript, vous pouvez trouver des informations ici .
L'essentiel est que l'événement qui vous intéresse le plus est DOMContentLoaded. C'est alors que le DOM est prêt.
Lorsque le navigateur charge initialement HTML et rencontre un
<script>...</script>dans le texte, il ne peut pas continuer à construire DOM. Il doit exécuter le script dès maintenant. Ainsi, le contenu DOM chargé ne peut se produire qu'après l'exécution de tous ces scripts.Les scripts externes (avec src) mettent également la construction du DOM en pause pendant le chargement et l'exécution du script. Ainsi, DOM Content Loaded attend également les scripts externes.
La seule exception concerne les scripts externes avec des attributs asynchrones et différés. Ils indiquent au navigateur de poursuivre le traitement sans attendre les scripts. Ainsi, l'utilisateur peut voir la page avant la fin du chargement des scripts, bon pour les performances.
À côté de cela, où est JavaScript dans tout cela?
Eh bien, il est exécuté entre les repeints. Cependant, il bloque. Le navigateur attend que JavaScript soit terminé avant de repeindre la page. Cela signifie que si vous voulez que votre page ait une bonne réponse (beaucoup de fps), alors le JS doit être relativement peu coûteux.
Biscuits
Lors de la réception d'une requête HTTP, un serveur peut envoyer un en-tête Set-Cookie avec la réponse. Le cookie est généralement stocké par le navigateur et, par la suite, la valeur du cookie est envoyée avec chaque demande adressée au même serveur que le contenu d'un en-tête HTTP Cookie. De plus, un délai d'expiration peut être spécifié ainsi que des restrictions à un domaine et un chemin spécifiques, limitant la durée et le site vers lequel le cookie est envoyé.
Pour le réseau, cela dépasse le cadre du cycle de vie du navigateur, sur lequel porte votre question. C'est aussi quelque chose que je ne connais pas bien, mais vous pouvez lire sur TCP ici . Ce qui pourrait vous intéresser est le poignée de main =.
Sources:
Vous pouvez trouver de nombreuses explications sur ce sujet, mais je suppose que ce qui suit est l'explication la plus simple pour comprendre comment les navigateurs rendent une page Web.
- Vous saisissez une URL dans la barre d'adresse de votre navigateur préféré.
- Le navigateur analyse l'URL pour trouver le protocole, l'hôte, le port et le chemin d'accès et il forme une demande HTTP (qui était probablement le protocole).
- 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
- 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)
- Lorsqu'une connexion est ouverte, la requête 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é
- 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?)
- Le plugin a accès à la requête complète et commence à préparer une réponse HTTP.
- 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
- 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).
- 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.
- Le navigateur reçoit la réponse et analyse le code HTML (qui avec une probabilité de 95% est cassé) dans la réponse.
- Une arborescence DOM est construite à partir du code HTML rompu et de nouvelles demandes sont envoyé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). Revenez à l'étape 3 et répétez l'opération pour chaque ressource.
- 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.
- 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.
- Le navigateur affiche la page à l'écran en fonction de l'arborescence DOM et des informations de style pour chaque nœud et vous voyez la page à l'écran.
J'aimerais suggérer ce qui suit à quiconque souhaite regarder ce qui se passe, c'est une réponse bon marché mais il pourrait être utile d'expliquer comment le navigateur récupère sa cascade de fichiers pour construire le contenu d'une URL (dans ce cas, un html ).
- Accédez à une page que vous souhaitez utiliser pour démontrer dans Chrome (ou utilisez cette page pour un exemple assez complexe)
- Ouvrez la console (Ctrl + Maj + i)
- Sélectionnez "Réseau" parmi les options
- Hit F5
Jouez avec les paramètres. Vous devez également regarder la chronologie créée dans l'onglet Performances
- Sélectionnez "Performance" parmi les options
- Hit F5
Il peut être utile ici d'accélérer les performances, de sorte que vous pouvez le regarder en temps réel (lent) si c'est quelque chose que vous souhaitez démontrer.
L'important est (en utilisant une page HTML comme exemple), l'ordre de rendu/application css/exécution de javascript, dépend de l'endroit où il apparaît dans le DOM. Il est possible d'exécuter un script à tout moment après son chargement, sous réserve que les ressources requises soient disponibles. Le CSS peut faire partie du document HTML (en ligne) ou il peut provenir d'un serveur très occupé et prendre 10 à 20 secondes avant de pouvoir être appliqué. J'espère que cela vous sera utile -R
- La réponse à la plupart de vos questions "Que se passe-t-il lorsque nous recherchons sur Google" .
- Le navigateur rend HTML à la page en suivant syntaxe html standard. Rappelez-vous que les navigateurs sont très indulgents et qu'il existe un code HTML non valide.
- Css est appliqué à la page en suivant grammaire css .
- Tous les navigateurs doivent implémenter js selon normes ECMA Script .
Quelques autres ressources utiles:
Plugin d'inclinaison de Firefox 3D aide à visualiser les pages Web et comment elles rendent le contenu dans différentes couches .
![Layers in the 3D plugin]()
onglet des performances de Chrome une bonne visualisation de ce qui se passe pendant le chargement d'une page et comment l'arborescence dom est construite. Il aide à identifier les goulots d'étranglement dans le processus de rendu.
Vous pouvez voir beaucoup de fonctionnalités backend de votre navigateur comme le contenu HTML mis en cache, les images mises en cache, le cache DNS, les ports ouverts, etc. en ouvrant chrome: // net-internals /.
Je crains que vous vouliez dire quand l'URL du navigateur est demandée par l'utilisateur , parce que vous mentionnez l'autre activité, ce qui peut être beaucoup de choses.
Après avoir récupéré le document initial pouvant contenir du contenu utilisateur, du balisage, voire des images:
- les ressources liées et incorporées (CSS, images) sont demandées via des requêtes HTTP supplémentaires.
- JS pourrait déclencher des (a) demandes synchrones supplémentaires pour récupérer ou stocker des actifs, des données, etc. ( XML , JSON , ...)
- sockets supplémentaires peuvent être ouverts pour transférer toutes sortes de données (binaires) dans les deux sens.
- Le stockage local (cookies, indexedDB , cache du navigateur, ..) peut être utilisé pour réutiliser les données pour les demandes suivantes
- Grâce à plusieurs
APIs la page peut utiliser le matériel du client (caméra, GPS, microphone, haut-parleurs, joystick, système de fichiers, etc.) - Toutes sortes de plugins côté client peuvent être invoqués: PDF, Flash/Silverlight, connexions Citrix, client de messagerie
- La page peut communiquer bilatéralement avec d'autres instances de la même page
Il existe de nombreux organigrammes, comme l'authentification, SSL, CORS , etc. Bien que la réponse de Ced soit très détaillée (+1!), Ce n'est que l'astuce de l'iceberg. Vous devriez peut-être EMBRASSER pour le public de présentation, votre choix.