Le principal moyen d'insérer du code JavaScript dans la page HTML est via la balise de script. Il s'agit notamment de deux formes. La première consiste à insérer directement le code JS entre les balises de script, et la seconde consiste à introduire des fichiers JS externes via l'attribut SRC. Étant donné que l'interprète bloque le rendu du reste de la page lors de l'analyse et de l'exécution du code JS, il provoquera un bloking à long terme et des retards pour les pages avec une grande quantité de code JS. Afin d'éviter ce problème, il est recommandé de placer toutes les références JS avant la balise </body>.
Il y a deux attributs de balises de script, différer et asynchrones, donc l'utilisation de balises de script est divisée en trois situations:
1. <script src = "example.js"> </ script>
Sans l'attribut de différer ou asynchrone, le navigateur chargera et exécutera immédiatement le script correspondant. C'est-à-dire, avant de rendre le document après la balise de script, vous n'attendez pas le chargement ultérieur des éléments du document et commencez le chargement et l'exécution après l'avoir lu. Cela bloquera le chargement du document suivant;
2. <script async src = "example.js"> </ script>
Avec l'attribut asynchrone, cela signifie que le chargement et le rendu des documents suivants sont effectués en parallèle avec le chargement et l'exécution des scripts JS, c'est-à-dire l'exécution asynchrone;
3. <Script Defer Src = "Exemple.js"> </ Script>
Avec l'attribut de différence, le processus de chargement des documents ultérieurs et le chargement du script JS (le chargement uniquement mais ne pas exécuter à ce moment) sont effectués en parallèle (asynchrone). L'exécution du script JS doit attendre que tous les éléments du document soient analysés et avant que l'événement téléchargé DomContent ne déclenche l'exécution.
La figure suivante peut voir intuitivement la différence entre les trois:
Parmi eux, Blue représente le temps de chargement du réseau de script JS, Red représente le temps d'exécution du script JS et Green représente la résolution du HTML.
D'après la figure, nous pouvons clarifier les points suivants:
1. Le remise et l'async sont cohérents dans le processus de chargement du réseau et sont tous deux exécutés de manière asynchrone;
2. La différence entre les deux est lorsque le script est exécuté après sa charge. On peut voir que le report est plus conforme aux exigences de la plupart des scénarios pour le chargement et l'exécution du script d'application;
3. S'il y a plusieurs scripts avec des attributs de différence, ils exécutent le script dans l'ordre de chargement; Pour Async, son chargement et son exécution sont étroitement liés. Quelle que soit l'ordre de déclaration, il sera exécuté immédiatement tant que la charge sera terminée. Il est peu utile aux scripts d'application car il ne tient pas compte du tout des dépendances.
résumé:
Le point commun entre différer et asynchronisation est qu'ils peuvent charger des fichiers JS en parallèle et ne bloqueront pas le chargement de la page. La différence est qu'après le chargement, JS attendra que la page entière soit chargée avant l'exécution. Async exécutera JS immédiatement après le chargement. Par conséquent, s'il y a un ordre d'exécution strict de JS, il est recommandé d'utiliser un repère pour charger.
Ce qui précède est une explication détaillée de la différence entre les attributs de report et asynchrones dans JS présentés par l'éditeur. J'espère que cela vous sera utile. Si vous avez des questions, veuillez me laisser un message et l'éditeur vous répondra à temps. Merci beaucoup pour votre soutien au site Web Wulin.com!