Comprendre les requêtes HTTP/Réponses concernant l'exécution du DOM et du script

Question

Je suis loin de la conception/développement web depuis longtemps, et j'ai récemment commencé à y revenir. J'ai commencé à faire des choses juste pour les faire fonctionner, et maintenant que je me remets dedans, je voudrais comprendre les choses un peu plus clairement - y compris quand le navigateur demande au DOM de le charger quand il est complètement chargé, et la différence entre le placement de script en haut et en bas d'une page.

Je me rends compte que c'est plus un poste pour http://doctype.com, mais je me suis dit que j'obtiendrais une réponse plus technique d'ici. J'aimerais aussi en faire un wiki communautaire, mais je n'ai pas assez de points ... pour le moment.

S'il vous plaît ne hésitez pas à me corriger - Mes questions/hypothèses:

1. Lorsque le navigateur fait une demande de la page, le serveur répond avec un objet de document qui contient la hiérarchie/ordre des scripts, css et html - correct?
2. Une fois reçu, le navigateur construit alors un arbre d'objets de document - est-ce quand le DOM est prêt ou quand il commence à rendre des éléments sur la page dans un navigateur?
3. À cet égard, quelle est la différence entre "quand le DOM est chargé" et "quand le DOM est prêt"?
4. Y at-il une différence entre placer le script (java) en haut (dans l'en-tête) ou en bas (avant le tag </body>)?
5. Y at-il un événement DOM qui se déclenche lorsque tous les actifs (css, images, javascripts, etc.) sont entièrement chargé par le navigateur? Je demande cela car parfois je peux avoir une image de fond encore chargée par le navigateur, et bien avant que cela puisse se terminer, mes animations Javascript commencent déjà à s'exécuter.

Merci d'avoir pris le temps de lire ceci, et j'attends vos réponses avec impatience!

Answer 1

1. Les navigateurs effectuent des requêtes conditionnelles et inconditionnelles sur le serveur. (Le serveur répond à l'enquête et le client Renders réponses ... il y a un débit limité d'informations et de l'utilisateur (Paramètres de confidentialité & Etc.)

Les demandes inconditionnelles:

une demande inconditionnelle est faite lorsque le navigateur client ne dispose pas d'une copie en cache de la ressource disponible localement . Dans ce cas, le serveur est devrait retourner la ressource avec Réponse HTTP/200 OK. Si les en-têtes de la réponse le permettent, le client peut mettre en cache cette réponse en afin de la réutiliser ultérieurement. Si le navigateur a besoin ultérieurement d'une ressource qui se trouve dans le cache local, les en-têtes de la ressource sont vérifiés à pour déterminer si la copie mise en cache est toujours . Si la copie mise en cache est fraîche, alors aucune demande réseau n'est faite et le client réutilise simplement la ressource du cache.

Demandes conditionnelles:

Si le navigateur a besoin plus tard une ressource qui est dans le cache, mais cette réponse est expirée (plus que son max-age ou après la date Expires), puis le client fera une demande conditionnelle au serveur pour déterminer si la réponse précédemment mise en cache est toujours valide et doit être réutilisée. La requête conditionnelle contient un en-tête If-Modified-Since et/ou If-None-Match indiquant au serveur la version du contenu que le navigateur a déjà dans son cache. Le serveur peut indiquer que la copie du client est encore frais en retournant HTTP/304 Non modifié têtes sans corps, ou il peut indiquer que la copie du client est périmé en retournant un HTTP/200 OK réponse avec la nouvelle version de la ressource .

2. Le modèle objet de document - est un modèle d'information en ce qui concerne une demande de navigateurs/réponse. À de nombreux égards, ECMA/Javascript est né comme une relation directe avec les éléments de la page et est devenu la solution par défaut de la bibliothèque DOM pour de nombreux objets du navigateur (document.frm etc). Cependant, l'implémentation et le support sont non unifiés et éparpillés sur tous les navigateurs. Fondamentalement, le DOM En cours de chargement est juste une définition pour dire que la page est en cours de rendu et le contenu a/est appelé. C'est quelque chose qui ne peut pas être compté en ce qui concerne l'accès à l'objet DOM, c'est donc une méthode d'interaction défavorable. Généralement, vous devez utiliser le statut prêt, ce qui signifie que le DOM est prêt et en attente de demande.

3. Yep charges de différence - l'ordre d'exécution du code côté client signifie où il sera chargé. Charger avec tout l'objet de la page ou charger après tout le contenu.

4. Oui et Non :) Pas de garantie réelle mais, avec javascript/jquery utilisé, vous pouvez utiliser l'événement onload du corps pour identifier tous les éléments de la page chargés avec succès. C'est une question piège btw. Pas de vraie réponse à ma connaissance, à moins que je me trompe à ce que vous avez demandé ...

Answer 2

1. balises de script en ligne avec votre balisage sont exécutées de manière synchrone avec le traitement du navigateur de ce balisage (à l'exception, voir # 2), et donc si - par exemple - ces tags référencent des fichiers externes, ils ont tendance à ralentir le traitement de la page. (Cela permet au navigateur de gérer les instructions document.write, qui modifient le marquage qu'elles sont en train de traiter.)

2. Les balises de script avec l'attribut defer peuvent, sur certains navigateurs, ne pas être exécutées avant que le DOM n'ait été entièrement exécuté. rendu. Naturellement, ceux-ci ne peuvent pas utiliser document.write. (De même, il y a un attribut asynchrone qui rend le script asynchrone, mais je n'en sais pas grand-chose ou à quel point il est supporté, les détails.Les balises de script dans le contenu que vous affectez aux éléments après le chargement du DOM (via innerHTML et similaire) ne sont pas exécutées du tout, sauf si vous utilisez une bibliothèque comme jQuery ou Prototype pour le faire pour vous. (À une exception a par Andy E: Sur IE, si elles ont un attribut defer, il les exécuter Ne fonctionne pas dans d'autres navigateurs..)

3. Si vous ajoutez un élément de script réel au document via Element # appendChild, le navigateur exécute ce script immédiatement (et vous pouvez facilement supprimer l'élément si vous le souhaitez, le script a déjà été exécuté et traité). (Vous ajouterez normalement ces éléments à l'élément head, mais en pratique cela n'a pas vraiment d'importance.)

4. Le traitement des événements à l'intérieur des attributs sur attributes() plutôt que dans une balise de script est exécuté lorsque l'événement concerné se produit.

Auteur Original - de: When does the browser execute Javascript? How does the execution cursor move?

Pour répondre à votre dernière question - bien parfois ...