Maison >interface Web >js tutoriel >Comment l'ordre de chargement et d'exécution des scripts JavaScript varie-t-il selon les scripts en ligne, externes, asynchrones, différés et ajoutés dynamiquement ?

Comment l'ordre de chargement et d'exécution des scripts JavaScript varie-t-il selon les scripts en ligne, externes, asynchrones, différés et ajoutés dynamiquement ?

Mary-Kate Olsen
Mary-Kate Olsenoriginal
2024-12-14 02:39:10679parcourir

How Does JavaScript Script Loading and Execution Order Vary Across Inline, External, Async, Defer, and Dynamically Added Scripts?

Comprendre l'ordre de chargement et d'exécution des scripts JavaScript

L'ordre d'exécution de JavaScript dans les pages Web peut être complexe en raison des différentes manières d'inclure des scripts externes et de l'ajout de scripts dynamiques. Pour clarifier les subtilités, examinons l'ordre de chargement et d'exécution des scripts JavaScript en fonction de différents scénarios :

Scripts en ligne ou externes

Qu'il s'agisse de code en ligne ou d'un script externe chargé à partir de un URI, les scripts sont exécutés dans l'ordre de leur apparition dans la page lors de l'analyse. Par conséquent, les scripts en ligne après les scripts externes attendent que ces scripts externes se chargent et s'exécutent.

Scripts asynchrones

Les scripts asynchrones, marqués de l'attribut async, s'exécutent dans un ordre imprévisible. Le navigateur les charge en parallèle et les exécute sans égard à l'ordre.

Scripts différés

Les scripts différés, avec l'attribut defer, sont chargés mais conservés jusqu'à ce que l'analyse soit terminée. Ensuite, ils s'exécutent dans l'ordre rencontré, en préservant les dépendances entre les scripts différés.

Scripts ajoutés dynamiquement

Le comportement d'insertion de scripts dynamiques varie selon les navigateurs. Par exemple, Firefox par défaut ajoute dynamiquement les balises de script à asynchrone, sauf indication contraire. Les scripts asynchrones peuvent s'exécuter immédiatement ou après l'analyse.

Séquence d'exécution

Compte tenu de ce qui précède, la séquence d'exécution pour le scénario décrit dans la question d'origine est la suivante :

  • Initialisation et chargement des scripts dans le répertoire (charger et exécuter dans l'ordre)
  • Premier script en ligne dans le charge un script de manière dynamique (apparaît après les scripts externes dans le )
  • Deuxième script en ligne dans le s'appuie sur le script chargé dynamiquement
  • Le script externe chargé dynamiquement se charge et s'exécute en parallèle (ordre imprévisible)
  • Le deuxième script en ligne ne s'exécutera qu'après l'exécution réussie du script chargé dynamiquement. En effet, les navigateurs donnent généralement la priorité à l'exécution des scripts dans l'ordre dans lequel ils sont rencontrés.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn