Eine kurze Diskussion über die JS -Dateireferenzmethode, die synchrone Ausführung und die asynchrone Ausführung

Autor：Eve Cole Aktualisierungszeit：2025-05-30 20:00:04

Jede in AppendChild (scriptNode) eingeführte JS -Datei wird asynchron ausgeführt (scriptNode muss in das Dokument eingefügt werden. Nur das Erstellen von Knoten und das Einstellen von SRC lädt die JS -Datei, die sich von IMGs und dem Laden unterscheidet).

Der Code in der <skript> -Tag in der HTML -Datei oder der Code in der von SRC verwiesenen JS -Datei wird synchron geladen und ausgeführt

Der Code im <skript> -Tag in der HTML -Datei wird asynchron mithilfe von document.write () -Methoden ausgeführt.

Die mit document.write () eingeführte JS -Datei wird im Code der JS -Datei, auf die das SRC -Attribut in der HTML -Datei verwiesen wird, synchron ausgeführt.

 <Script> // Synchron geladen von Code ausgeführt </script> synchron

 <script src = "xx.js"> </script> // synchron laden und ausführen Code in xx.js

 <Script> document.write ('<script src = "xx.js"> <// script>'); // asynchrones Laden zum Ausführen von Code in xx.js </script>

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

Es gibt den folgenden Code in xx.js:

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

Dann werden xx.js, 11.js und 22.js gleichzeitig geladen und ausgeführt.

Wenn xx.js im Einfügen asynchron geladen ist, sind 11.Js und 22.Js immer noch synchron geladen (synchron in asynchronem, dh das Laden dieser 2 Dateien ist in der Sequenz).

Test: In Alarm in 11, document.write () In 22 können Sie sehen, dass die Schreibanweisung in 22 blockiert ist

In der folgenden Weise lädt und führt XX.js nach der Ausführung von AppendChild asynchron und führt sie aus.

 var script = document.createelement ("script"); script.setAttribute ("src", "xx.js"); documenrt.getElementsByTagName ("Kopf") [0] .AppendChild (Skript);

Eine Funktion, die eine JS -Datei lädt:

 var loadJS = Funktion (URL, Rückruf) {var head = document.getElementsByTagName ('head') [0], script = document.createelement ('script'); script.src = url; script.type = "text/javaScript"; head.Appendchild (script); script.onload = script. . } else {alert ("Kann die JS -Datei nicht laden")}}}

Für Punkt 4 -Tests (bei denen die Insertionswarnung beim Laden leicht zu erkennen ist)

tryjs.html

 <! DocType html> <html> <head> <meta http-äquiv = "content-type" content = "text /html; charset = utf-8" /> <script src = "tryjs.js" onload = "if (! Dokument) {{console.log ('outer js JS-Aufruf, nicht onreadyStatechange = "console.log ('äußerer JS -Rückruf', this.readystate, 'dh');"> </script> <body> </body> </html>

tryjs.js

 console.log ('write begin'); document.write ('<script src = "try.1.js" onReadyStatechange = "console.log (/' Datei 1 Rückruf /'.this.readyState,/ 'IE/'); /'); }"><//script>');document /'); }"><//script>');console.log('Write fertig ');

try.1.js

 console.log ('lastjs 1 begin'); console.log ('loadJS 1 fertig');

try.2.js

 console.log ('lastjs 2 begin'); console.log ('lastjs 2 fertig');

Testergebnisse (der Rückruf vollständig in Datei 2 und Datei 1 ist in IE7/8/9 Order ungewiss)

Dh 7:

Protokoll: äußerer JS -Rückruf laden IE
Protokoll: äußerer JS -Rückruf geladen dh dh
Protokoll: Schreiben Sie beginnen
Protokoll: Schreiben Sie fertig
Protokoll: äußerer JS -Rückruf vollständig dh dh
Protokoll: Datei 1 Rückruf laden IE
Protokoll: Datei 2 Rückruf Laden IE
Protokoll: LoadJS 1 Beginnen Sie
Protokoll: LoadJS 1 fertiggestellt
Protokoll: LoadJS 2 Beginnen Sie
Protokoll: LoadJS 2 fertiggestellt
Protokoll: Datei 2 Rückruf abschließen IE
Protokoll: Datei 1 Rückruf abschließen IE

IE8:

IE9:

Protokoll: Schreiben Sie beginnen
Protokoll: Schreiben Sie fertig
Protokoll: äußerer JS -Rückruf vollständig dh dh
Protokoll: Datei 1 Rückruf laden IE
Protokoll: Datei 2 Rückruf Laden IE
Protokoll: LoadJS 1 Beginnen Sie
Protokoll: LoadJS 1 fertiggestellt
Protokoll: LoadJS 2 Beginnen Sie
Protokoll: LoadJS 2 fertiggestellt
Protokoll: Datei 1 Rückruf abschließen IE
Protokoll: Datei 2 Rückruf abschließen IE

Firefox:

Schreiben Sie an
Schreiben Sie fertig
äußerer JS -Rückruf, nicht dh dh
LoadJS 1 Beginnen Sie
LoadJS 1 fertig
Datei 1 Rückruf, nicht dh
Loadjs 2 beginnen
Loadjs 2 fertig
Datei 2 Rückruf, nicht dh

CHROM:

Schreiben Sie an
Schreiben Sie fertig
äußerer JS -Rückruf, nicht dh dh
LoadJS 1 Beginnen Sie
LoadJS 1 fertig
Datei 1 Rückruf, nicht dh
Loadjs 2 beginnen
Loadjs 2 fertig
Datei 2 Rückruf, nicht dh

Das obige ist die kurze Diskussion der JS -Dateireferenzmethode und der synchronen Ausführung und der asynchronen Ausführung, die der Editor Ihnen mitbringt. Ich hoffe, es wird für alle hilfreich sein und wulin.com mehr ~ unterstützen ~