web-dev-qa-db-fra.com

JavaScript: événements de chargement DOM, séquence d'exécution et $ (document) .ready ()

Je viens de me rendre compte que je n'ai pas la connaissance fondamentale de ce qui se passe exactement lorsqu'une page est chargée dans un navigateur.

Supposons que j'ai une structure comme celle-ci:

<head>

<script src="jquery.js" type="text/javascript"></script>
<script src="first.js" type="text/javascript"></script>
</head>
<body>
...
<script type="text/javascript" id="middle">
    // some more JS here...
</script>
...
<script src="last.js" type="text/javascript"></script>
</body>

Voici les questions que j'ai:

  1. Dans quelle séquence les choses se passent-elles? D'abord le DOM puis le JS est exécuté, est-ce vice-versa, ou est-ce simultané (ou dès que les fichiers JS ont fini de télécharger, sans se soucier du DOM )? Je sais que les scripts sont chargés dans l'ordre.

  2. Où se situe $(document).ready()? Dans l'onglet Net de Firebug, je vois DOMContentLoaded événement et load événement. $(document).ready() est-elle déclenchée lorsque l'événement DOMContentLoaded se déclenche? Impossible de trouver des informations concrètes à ce sujet (tout le monde mentionne simplement "lorsque le DOM est chargé").

  3. Que signifie exactement "lorsque le DOM est chargé"? Que tout le HTML/JS a été téléchargé et analysé par le navigateur? Ou juste le HTML?

  4. Le scénario suivant est-il possible: il existe une $(document).ready() qui appelle le code dans last.js, Mais s'exécute avant le chargement de last.js? Où serait-il le plus probable (dans first.js Ou dans le bloc de code en ligne)? Comment puis-je éviter ce scénario?

Je veux comprendre la grande image de ce qui se passe quand et de ce qui dépend de quoi (le cas échéant).

javascriptjqueryeventsdom
60
montrealist

Javascript est exécuté comme on le voit. Généralement, le navigateur arrête d'analyser la page dès qu'il voit une balise <script>, Télécharge et exécute le script, puis continue. C'est pourquoi il est généralement conseillé de mettre les balises <script> En bas: afin que l'utilisateur n'ait pas de page vierge pendant que le navigateur attend le téléchargement des scripts.

Cependant, à partir de Firefox 3.5, les scripts sont téléchargés en arrière-plan tandis que le reste de la page est rendu. Dans le cas désormais inhabituel où le script utilise document.write Ou similaire, Firefox sauvegardera et redessinera si nécessaire. Je ne pense pas que d'autres navigateurs le fassent pour le moment, mais je ne serais pas surpris que ce soit à venir, et IE supporte au moins un attribut defer dans le <script> Qui retardera le chargement du script jusqu'à ce que la page soit chargée.

DOMContentLoaded est exactement cela: il se déclenche dès que le DOM est chargé. Autrement dit, dès que le navigateur a analysé tout le code HTML et en a créé une arborescence en interne. Il n'attend PAS le chargement des images, CSS, etc. Le DOM est tout ce dont vous avez généralement besoin pour exécuter le Javascript que vous voulez, il est donc agréable de ne pas avoir à attendre d'autres ressources. Cependant, je crois que seul Firefox prend en charge DOMContentLoaded; dans d'autres navigateurs, ready() attachera simplement un événement à l'ancien onload normal.

Javascript est garanti pour fonctionner dans l'ordre où il apparaît dans votre code HTML, alors assurez-vous simplement que votre fonction est définie avant d'essayer de la joindre à un événement.

37
Eevee
  1. Tous les scripts inclus se produisent afin qu'ils apparaissent dans le html, ils sont chargés lors de l'analyse du html.
  2. Cela signifie que TOUS les objets dom ont été chargés, et tous incluent des scripts et css. (Les images ne le sont peut-être pas encore).
  3. voir 2.
  4. $ (document) .ready () ne reçoit un appel qu'une fois que tous les scripts et objets dom sont chargés, ça devrait aller.
7
Zoidberg

http://javascript.about.com/od/hintsandtips/a/exeorder.htm devrait vous aider à répondre à cette

fondamentalement: d'abord toutes les données sont chargées (le html), puis le js le code dans la tête/le corps qui n'est pas dans une fonction ou prêt ou quelque chose comme ça est exécuté en premier. à partir de là, il va séquentiellement les scripts

il est important de noter que js a priorité sur ie. chargement css - donc formez une perspective de performance, vous devriez avoir le js en bas de la page.

donc @ 4: vous n'avez pas besoin d'empêcher ce scénario car first.js est toujours lu/exécuté avant last.js

4
Niko