Comment fonctionne la séquence du cycle de vie de la page de navigateur ?

Question

Voudrais créer une présentation sur la façon dont le navigateur fonctionne, quelqu'un sait exactement cycle de vie de la séquence qui se produisent à chaque fois que l'URL d'un navigateur qui est demandé?

Quelles sont les étapes qui se produisent après la réception d'une réponse du serveur en termes de :

1. Rendu - filtres CSS application, webkit, etc...
2. Javascript - le Chargement et l'exécution
3. Application CSS
4. DOM de la Construction / à qui est le point de DOM écrits et comment?
5. Les Cookies
6. Le réseau, activités, etc.

-- pas tranquille sûr si c'est encore le bon ordre...

est-il le même dans tous les navigateurs ou les différents navigateurs ont différents cycles de vie?

Remarque - une réponse écrite avec des détails en expliquant chaque étape par Ced ci-dessous. ce que j'ai été à la recherche de était "Critique de Rendu" - le général les étapes du processus sont bien expliquées par d'autres bonnes réponses.

Dieu merci, et bon travail à tous!

Answer 1

Ce dont vous parlez est la Critique de Rendu.

Le point 1., 3. et 4. peut être repris en tant que tel:

1. La Construction du Modèle d'Objet de Document(DOM)
2. La Construction de l'objet CSS modèle(CSSOM)
3. La Construction de l'Arbre de Rendu
4. Mise en page
5. De la peinture.

---

Voici une ventilation de ce qui se passe derrière la scène.

1. La construction de l'objet DOM.

La première étape est de créer les DOM. En effet, ce que vous recevez à partir du réseau sont octets et le navigateur utiliser ce qu'on appelle arborescence DOM. À cet effet, il a besoin de convertir ces octets dans l'arborescence DOM.

1. Vous recevez la page des octets. Votre navigateur convertit en texte.
2. Le texte est converti à nœuds.
3. les nœuds sont convertis à des "objets"
4. La Construction de l'arbre, appelé l'ARBRE du DOM.

Vous pouvez vérifier le développeur de l'outil pour voir combien de temps il faut.

Ici, nous pouvons voir qu'il a pris 4.938 mme.

Lorsque ce processus est terminé, le navigateur aura le contenu complet de la page, mais pour être en mesure de rendre le navigateur doit attendre le CSS du Modèle Objet, aussi connu comme CSSOM événement, qui sera de dire au navigateur comment les éléments doivent ressembler au moment du rendu.

2. La manipulation de la CSS

Pour le css c'est le même que ci-dessus, le navigateur a besoin de convertir ces fichiers dans le CSSOM:

Le css est également une structure d'arbre. En effet, si vous mettez une taille de police de l'élément parent puis les enfants en hériteront.

Qui a appelé à recalculer style dans l'outil de développeur

CSS est l'un des éléments les plus importants de la critique de rendu, parce que le navigateur bloque le rendu de la page jusqu'à ce qu'il reçoit et traite tous les fichiers css dans votre page, le CSS est rendu blocage

3. Le rendu de l'arbre

CSSOM ET DOM sont combinés pour l'affichage.

4. Mise en page

Tout doit être calculé en pixels. Donc quand vous dites un élément a une largeur de 50%, le navigateur derrière la scène de la transformation en pixels:

Chaque fois qu'une mise à jour de la file d'arbre, ou la taille de la fenêtre d'affichage change, le navigateur d'exécuter la mise en page de nouveau.

5.Peinture

L'étape est de convertir tout cela en pixels sur l'écran. C'est la peinture de l'étape.

---

Javascript

Pour le JavaScript du cycle de vie, vous pouvez trouver des infos ici.

L'essentiel, c'est que l'événement vous a le plus susceptible se soucient DOMContentLoaded. C'est lorsque le DOM est prêt.

Lorsque le navigateur d'abord charges HTML et vient à travers un <script>...</script> dans le texte, il ne peut pas continuer à construire des DOM. Il devez exécuter le script maintenant. Sorte DOM Contenu Chargé arriver après tous ces scripts sont exécutés.

Des scripts externes (src) a également mis DOM bâtiment de pause pendant l' le script est en cours de chargement et d'exécution. Sorte DOM Contenu Chargé attend des scripts externes ainsi.

La seule exception sont des scripts externes avec async et de reporter les attributs. Ils indiquent au navigateur de continuer le traitement sans d'attente pour les scripts. De sorte que l'utilisateur peut voir la page avant de scripts la fin du chargement, bon pour la performance.

A côté de cela, où est le JavaScript dans tout cela ?

Eh bien, c'est exécutée entre le repeint. Cependant, il est bloquant. Le navigateur va attendre JavaScript doit être fait avant de repeindre la page. Cela signifie que si vous voulez que votre page pour avoir la bonne réponse (beaucoup de fps), puis le JS doit être relativement peu coûteux.

---

Les Cookies

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 stocké par le navigateur et, par la suite, la valeur du cookie est envoyé avec chaque demande faite sur le même serveur que le contenu d'un Cookie en-tête HTTP. En outre, un délai d'expiration peut être spécifié en tant que bien que les restrictions à un domaine spécifique et le chemin d'accès, limitant combien de temps et à quel site, le cookie est envoyé.

---

Pour le réseau, c'est au-delà de la portée de navigateur du cycle de vie, qui avez une question. C'est aussi quelque chose que je ne suis pas très versé dans, mais vous pouvez lire sur TCP ici . Ce que vous pourriez être intéressé en est la poignée de main.

---

Sources:

• Critique de rendu

• critique de rendu

• Les Cookies

• js cycle de vie

• tcp

• http

Answer 2

Vous pouvez trouver de nombreuses explications sur ce sujet, mais je suppose que la suite est l'explication la plus simple de comprendre comment navigateur(s) effectue le rendu d'une page web.

1. Vous tapez une URL dans la barre d'adresse de votre navigateur préféré.
2. Le navigateur analyse les URL afin de trouver le protocole, l'hôte, le port et le chemin d'accès et il les formes d'une requête HTTP (qui était probablement le protocole).
3. Pour atteindre l'hôte, il faut d'abord traduire le lisible par l'homme de l'hôte dans un numéro d'IP, et ce, en faisant une recherche DNS sur l'ordinateur hôte
4. Puis un socket doit être ouvert à partir de l'ordinateur de l'utilisateur pour que la propriété intellectuelle nombre, sur le port spécifié (le plus souvent le port 80)
5. Lorsqu'une connexion est ouverte, la requête HTTP est envoyée à l'hôte
6. L'hôte transmet la requête au serveur de logiciel (le plus souvent Apache) configuré pour écouter sur le port spécifié
7. Le serveur vérifie la demande (plus souvent uniquement le chemin d'accès), et lance le serveur plugin nécessaire pour le traitement de la demande (correspondant à la langue du serveur que vous utilisez, PHP, Java, .NET, Python?)
8. Le plugin accès de la demande complète, et commence à préparer une réponse HTTP.
9. Pour construire la réponse d'une base de données (le plus probable) d'accès. Une recherche de base de données, sur la base des paramètres dans le chemin d'accès (ou de données) de la demande
10. Les données de la base de données, ainsi que d'autres informations le plugin décide d'ajouter, est combiné en une longue chaîne de texte (probablement HTML).
11. Le plugin combine des données avec certaines méta-données (sous la forme d'en-têtes HTTP), et envoie la réponse HTTP au navigateur.
12. Le navigateur reçoit la réponse, et analyse le langage HTML (avec une probabilité de 95% est cassé) dans la réponse.
13. Un DOM arbre est construit à partir de la rupture de HTML et de nouvelles demandes sont faites sur le serveur pour chaque nouvelle ressource qui se trouve dans le source HTML (généralement des images, feuilles de style, et les fichiers JavaScript). Retournez à l'étape 3 et répétez l'opération pour chaque ressource.
14. Les feuilles de style sont analysées, et le rendu de l'information dans chacun reçoit attaché au nœud correspondant dans l'arborescence DOM.
15. Javascript est interprété et exécuté, et les nœuds DOM sont déplacés et le style de l'information est mise à jour en conséquence.
16. Le navigateur affiche la page sur l'écran en fonction de l'arborescence DOM et les informations de style pour chaque nœud et vous consultez la page sur l'écran.

Source

Answer 3

Je voudrais suggérer ce qui suit pour tous ceux qui voudraient regarder ce qui se passe, c'est un bon marché de réponse, mais il peut être utile d'expliquer comment le navigateur récupère c'est la cascade de fichiers pour construire le contenu d'une URL (dans ce cas, le html).

1. Accédez à une page que vous souhaitez utiliser pour démontrer en Chrome (ou utiliser cette page pour une assez complexe exemple)
2. Ouvrez la console (Ctrl + Maj + i)
3. Sélectionnez "Réseau" dans les options
4. Appuyez Sur La Touche F5

Jouer avec les réglages. Vous devriez aussi regarder sur la timeline créé dans l'onglet Performances

5. Sélectionnez "Performance" dans les options
6. Appuyez Sur La Touche F5

Il peut être utile ici de limiter la performance, de sorte que vous pouvez regarder en temps réel (lent) si c'est quelque chose que vous voulez démontrer.

L'important, c'est (à l'aide d'une page HTML par exemple), l'ordre de rendu/l'application css/en cours d'exécution javascript, dépend de l'endroit où il apparaît dans les DOM. Il est possible d'exécuter un script à tout moment après il est chargé, sous réserve que les ressources nécessaires soient disponibles. Css pourrait être une partie du document HTML (inline) ou il pourrait être à venir à partir d'un très serveur occupé et de prendre de 10 à 20 secondes avant de pouvoir être appliquées. J'espère que cela est de peu d'aide-R

Answer 4

1. La réponse à la plupart de vos questions "Ce qui se passe lorsque l'on recherche Google".
2. Le navigateur affiche le code HTML de la page en suivant la syntaxe html standard. Rappelez-vous que les navigateurs sont très indulgents et il ya une telle chose comme du code HTML non valide.
3. Css est appliqué à la page en suivant le css de la grammaire.
4. Tous les navigateurs ont à mettre en œuvre js selon ECMA Script normes.

Quelques autres ressources utiles:

1. Firefox 3D inclinaison plugin permettre de visualiser les pages web et la manière dont ils sont le rendu de contenu dans les différentes couches.

2. Google Chrome, onglet performances , une bonne visualisation de ce qui se passe lors d'un chargement de page et comment l'arbre du dom est construit. Il les aide à identifier les goulots d'étranglement dans le processus de rendu.

3. Vous pouvez voir beaucoup de backend de la fonctionnalité de votre navigateur, comme la mise en cache du contenu HTML, les images du cache, cache dns, ouvrir les ports, etc. par l'ouverture de google chrome://net-internals/.

Answer 5

J'ai peur que tu veux dire lorsque le navigateur l'URL est demandé par l'utilisateur, car vous mentionnez les autres activités, ce qui peut être un grand nombre de choses.

Après avoir récupéré le document initial qui peuvent contenir du contenu de l'utilisateur, de balisage, même les images:

• liés et incorporés ressources (CSS, images) sont demandés via extra requêtes HTTP.
• JS pourrait déclencher d'autres (a)synchrone demandes de récupérer ou de stocker des ressources, des données, etc. (XML, JSON, ...)
• Supplémentaires sockets peut être ouvert pour transférer toutes sortes de (binaire) des données d'avant en arrière.
• Local de stockage (cookies, indexedDB, cache du navigateur, ..) peut être utilisé pour la ré-utilisation des données pour les demandes suivantes
• À travers de nombreux APIs , la page peut utiliser le matériel du client (appareil photo, GPS, microphone, haut-parleurs, une manette de jeu, système de fichiers, etc.)
• Toutes sortes de côté client plugins peuvent être invoquées: PDF reader, Flash/Silverlight, Citrix connexions, client E-mail
• La page peut-communication bilatérale avec d'autres instances de la même page

Il existe de nombreux de nombreux organigrammes, pour, comme l'authentification, SSL, de la SCRO, etc. Alors que la Ced, la réponse est très détaillé (+1 !), c'est seulement la pointe de l'iceberg. Peut-être vous devriez BAISER pour le bien de la présentation de l'auditoire, de votre choix.