Une brève discussion sur la méthode de référence du fichier JS, l'exécution synchrone et l'exécution asynchrone

Auteur：Eve Cole Date de mise à jour：2025-05-30 20:00:04

Tout fichier JS introduit dans APPENDCHILD (ScriptNode) est exécuté de manière asynchrone (ScriptNode doit être inséré dans le document, la création de nœuds et le définition de SRC ne chargeront pas le fichier JS, qui est différent de l'IMG et du chargement)

Le code dans la balise <cript> dans le fichier html ou le code du fichier js référencé par SRC est chargé et exécuté de manière synchrone

Le code de la balise <cript> dans le fichier HTML est exécuté de manière asynchrone à l'aide de la méthode document.write ().

Le fichier JS introduit à l'aide de document.write () est exécuté de manière synchrone dans le code du fichier JS référencé par l'attribut SRC dans le fichier HTML.

1 et 1

 <cript> // Chargement synchrone du code exécuté </cript>

 <script src = "xx.js"> </ script> // Chargement et exécution de code synchrone dans xx.js

3 et 3

 <script> document.write ('<script src = "xx.js"> <// script>'); // Chargement asynchrone pour exécuter du code dans xx.js </cript>

 <script src = "xx.js"> </ script>

Il y a le code suivant dans xx.js:

 document.write ('<script src = "11.js"> <// script>'); document.write ('<script src = "22.js"> <// script>');

Ensuite, xx.js, 11.js et 22.js sont chargés et exécutés simultanément.

Si xx.js est chargé de manière asynchrone dans l'insertion, 11.js et 22.js sont toujours chargés de manière synchrone (synchrone en asynchrone, c'est-à-dire que le chargement de ces 2 fichiers est en séquence)

Test: en alerte en 11, document.write () en 22, vous pouvez voir que l'instruction d'écriture en 22 est bloquée

De la manière suivante, xx.js se chargera et exécutera de manière asynchrone après l'exécution de l'Apendchild.

 var script = document.createElement ("script"); script.setAttribute ("src", "xx.js"); docUmenrt.getElementsByTagName ("head") [0] .APPENDCHILD (script);

Une fonction qui charge un fichier JS:

 var loadjs = function (url, callback) {var head = document.getElementsByTagName ('head') [0], script = document.createElement ('script'); script.src = url; script.type = "text / javascript"; head.appendChild (script); script.onload = script.onreadystatechange = function () {// Script tag, il y a un événement onReadyStateChange sous IE, W3C Standard a un événement Onload // Ces prêts à ciels sont pour IE8 et ci-dessous, W3C la norme est que la balise de script n'a pas ce chargement de fichiers sur le chargement, le chargement de fichiers ne sera pas en cours d'exécution. (! this.readystate) est une norme W3C if ((! this.readystate) || this.readystate == "complete" || this.readystate == "chargé") {callback (); } else {alert ("ne peut pas charger le fichier js")}}}

Pour les tests du point 4 (où l'alerte d'insertion est facile à voir le blocage pendant le chargement)

tryjs.html

 <! Doctype html> <html> <éadf> <meta http-equiv = "contenu-type" contenu = "text / html; charset = utf-8" /> <script src = "tryjs.js" onload = "if (! Document.all) {console.log ('exception js callback, pas ie');}" onreadystatechange = "Console.log ('exter js rappel', this.readystate, 'ie');"> </ script> <body> </ body> </html>

tryjs.js

 console.log ('write begin'); document.write ('<script src = "try.1.js" onreadystatechange = "console.log (/' fichier 1 callback /',this.readystate ,/ 'ie /');" onload = "if (! document.all) {console.log (/ 'fichier 1 callback, pas ie ie /''); }"><//script>'');Document.write('<script src = "try.2.js" onreadystatechange = "console.log (/ 'file 2 callback /', thereadystate ,/' ie / ');" onload = "if (! document.all) {console.log (/' fichier 2 cal /''); }"><//script>');Console.log('write fini ');

try.1.js

 console.log («Loadjs 1 Begin»); console.log («Loadjs 1 fini»);

essay.2.js

 console.log («Loadjs 2 Begin»); console.log («Loadjs 2 fini»);

Résultats des tests (le rappel complet du fichier 2 et du fichier 1 est incertain dans l'ordre IE7 / 8/9)

IE 7:

Journal: chargement de rappel JS extérieur IE
Journal: le rappel JS extérieur chargé IE
Journal: Écrire commence
Journal: écrire terminé
Journal: le rappel JS extérieur complet IE
Journal: fichier 1 chargement de rappel IE
Journal: fichier 2 Rappel Chargement IE
Journal: Loadjs 1 commence
Journal: Loadjs 1 terminé
Journal: Loadjs 2 Begin
Journal: Loadjs 2 terminé
Journal: fichier 2 rappel complet IE
Journal: fichier 1 rappel complet IE

IE8:

IE9:

Journal: Écrire commence
Journal: écrire terminé
Journal: le rappel JS extérieur complet IE
Journal: fichier 1 chargement de rappel IE
Journal: fichier 2 Rappel Chargement IE
Journal: Loadjs 1 commence
Journal: Loadjs 1 terminé
Journal: Loadjs 2 Begin
Journal: Loadjs 2 terminé
Journal: fichier 1 rappel complet IE
Journal: fichier 2 rappel complet IE

Firefox:

Écrire commence
Écrire fini
rappel js extérieur, pas ie
Loadjs 1 commence
Loadjs 1 fini
Fichier 1 rappel, pas IE
Loadjs 2 commence
Loadjs 2 terminé
Rappel de fichier 2, pas IE

CHROME:

Écrire commence
Écrire fini
rappel js extérieur, pas ie
Loadjs 1 commence
Loadjs 1 fini
Fichier 1 rappel, pas IE
Loadjs 2 commence
Loadjs 2 terminé
Rappel de fichier 2, pas IE

Ce qui précède est la brève discussion de la méthode de référence de fichiers JS et de son exécution synchrone et de l'exécution asynchrone que l'éditeur vous apporte. J'espère que ce sera utile à tout le monde et soutenir Wulin.com plus ~