Maison >interface Web >js tutoriel >Comment JavaScript gère-t-il le chargement et l'ordre d'exécution des scripts dans les pages Web ?

Comment JavaScript gère-t-il le chargement et l'ordre d'exécution des scripts dans les pages Web ?

Linda Hamilton
Linda Hamiltonoriginal
2024-12-11 02:47:09376parcourir

How Does JavaScript Handle Script Loading and Execution Order in Web Pages?

Quel est l'ordre de chargement et d'exécution des scripts JavaScript dans une page Web ?

Les scripts JavaScript peuvent être inclus dans une page Web dans divers de différentes manières, notamment :

  • Code en ligne ou chargé à partir d'une URL externe
  • Inclus dans le ou tags
  • N'ayant aucun attribut, différé ou asynchrone (pour les scripts externes uniquement)
  • Inclus dans la source statique ou ajouté dynamiquement à l'aide d'autres scripts

Chargement Ordre

Les scripts sont chargés dans l'ordre dans lequel ils sont rencontrés dans le code HTML, qu'ils soient ou non en ligne ou externe. Cependant, l'ordre de chargement des scripts ajoutés dynamiquement peut être affecté par le comportement du navigateur.

Ordre d'exécution

L'ordre d'exécution des scripts JavaScript dépend de plusieurs facteurs :

  • Règle générale : Les scripts sont exécutés dans l'ordre dans lequel ils sont rencontrés dans la page, à l'exception des scripts marqués de async.
  • Scripts async : Les scripts marqués async sont exécutés dans un ordre imprévisible. Ils peuvent s'exécuter dès qu'ils sont chargés ou une fois l'analyseur terminé.
  • Scripts ajoutés dynamiquement : Le comportement des scripts ajoutés dynamiquement dépend du navigateur.
  • defer Scripts : Les scripts marqués defer attendent que l'analyseur ait terminé, puis s'exécutent dans l'ordre dans lequel ils ont été rencontrés.
  • Scripts de module (type="module") : Les scripts de module reçoivent automatiquement l'attribut defer et s'exécutent dans l'ordre une fois l'analyse terminée. Ils peuvent également utiliser l'attribut async pour exécuter immédiatement des scripts de module en ligne.

Exemple

Dans l'exemple donné avec des scripts en ligne dans le corps, l'ordre de chargement est :

  1. Scripts d'initialisation dans le
  2. Scripts externes pour le chargement du script
  3. Script en ligne ajoutant un autre script externe
  4. Script en ligne utilisant le script externe ajouté

Le l'ordre d'exécution dépend du fait que le script ajouté dynamiquement soit marqué comme asynchrone ou non :

  • Si le script ajouté n'est pas marqué comme asynchrone, il s'exécutera après le script en ligne qui l'a ajouté.
  • Si le script ajouté est marqué comme asynchrone, son ordre d'exécution est imprévisible et peut se produire avant ou après le script en ligne qui l'a ajouté.

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