Una breve discusión sobre el método de referencia de archivo JS, la ejecución síncrona y la ejecución asincrónica

Autor：Eve Cole Fecha de actualización：2025-05-30 20:00:04

Cualquier archivo JS introducido en AppendChild (scriptNode) se ejecuta de forma asincrónica (ScriptNode debe insertarse en el documento, solo crear nodos y configurar SRC no cargará el archivo JS, que es diferente de IMG y la carga)

El código en la etiqueta <Script> en el archivo HTML o el código en el archivo JS a los que se hace referencia por SRC se carga y se ejecuta sincrónicamente

El código en la etiqueta <Script> en el archivo HTML se ejecuta de forma asincrónica utilizando el método document.write ().

El archivo JS introducido usando el método document.write () se ejecuta sincrónicamente en el código del archivo JS a los que se hace referencia el atributo SRC en el archivo HTML.

 <script> // Carga sincrónica de código ejecutado </script>

 <script src = "xx.js"> </script> // cargar y ejecutar código sincrónicamente en xx.js

 <script> document.write ('<script src = "xx.js"> <// script>'); // Carga asíncrona para ejecutar código en xx.js </script>

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

Hay el siguiente código en xx.js:

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

Luego xx.js, 11.js y 22.js se cargan y ejecutan simultáneamente.

Si xx.js se carga asincrónicamente en inserción, 11.js y 22.js todavía se cargan sincrónicamente (sincrónico en asíncrono, es decir, la carga de estos 2 archivos está en secuencia)

Prueba: en alerta en 11, document.write () en 22, puede ver que la declaración de escritura en 22 está bloqueada

De la siguiente manera, xx.js cargará y ejecutará asíncronamente después de que se ejecute AppendChild.

 var script = document.createElement ("script"); script.setAttribute ("src", "xx.js"); documenrt.getElementsBytagName ("Head") [0] .AppendChild (script);

Una función que carga un archivo JS:

 var Loadjs = function (url, llamado) {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 () {// Etiqueta de script, hay un evento OnreadyStateChange en IE, W3C Standard tiene Evento Onload // Estas ReadyStates son para IE8 y a continuación, W3C El estándar es que la etiqueta de script no tiene este OnreadyStateChange, por lo que no habrá esto. (! this.readyState) es un estándar W3C if ((! this.readyState) || this.readyState == "Complete" || this.readyState == "cargado") {llamado (); } else {alerta ("no puede cargar el archivo js")}}}

Para las pruebas del punto 4 (donde la alerta de inserción es fácil de ver el bloqueo durante la carga)

tryjs.html

 <! DOCTYPE HTML> <HTML> <HEAD> <meta http-equiv = "content-type" content = "text /html; charset = utf-8" /> <script src = "tryjs.js" onload = "if (! Docum.all) {Console.log ('Outer JS Callback, no ie');}" onreadyStateChange = "Console.log ('Outer JS Callback', this.readyState, 'es decir');"> </script> <body> </body> </html>

tryjs.js

 console.log ('Write Begin'); document.Write ('<script src = "try.1.js" onreadyStateChange = "console.log (/' file 1 callback /',this.readyState,/ 'ie/');" onload = "if (! document.all) {console.log (/'archivo 1 de archivo, no IE /'); °; °"><//script>') ;Document.Write('<Script src = "try.2.js" onreadyStateChange = "console.log (/'file 2 callback /',this.readystate,/' ie/');" onload = "if (! document.all) {console.log (/' file 2 Callback, no ieeeee /'); ',><//script>') ;Console.log('Write terminado');

prueba.1.js

 console.log ('loadjs 1 begin'); console.log ('loadjs 1 terminado');

prueba.2.js

 console.log ('loadjs 2 begin'); console.log ('loadjs 2 terminado');

Resultados de la prueba (la devolución de llamada completa del archivo 2 y el archivo 1 es incierto en el pedido IE7/8/9)

Es decir, 7:

Registro: devolución de llamada JS externa, es decir,
Registro: devolución de llamada JS externa cargada es decir
Registro: escribir comienza
Registro: Escribir terminado
Registro: devolución de llamada JS Outer JS Completa es decir
Registro: Archivo 1 Carga de devolución de llamada IE
Registro: Archivo 2 Carga de devolución de llamada IE
Registro: Loadjs 1 Comience
Registro: Loadjs 1 terminado
Registro: Loadjs 2 comienza
Registro: Loadjs 2 terminado
Registro: archivo 2 devolución de llamada completa es decir
Registro: archivo 1 devolución de llamada completa es decir

IE8:

IE9:

Registro: escribir comienza
Registro: Escribir terminado
Registro: devolución de llamada JS Outer JS Completa es decir
Registro: Archivo 1 Carga de devolución de llamada IE
Registro: Archivo 2 Carga de devolución de llamada IE
Registro: Loadjs 1 Comience
Registro: Loadjs 1 terminado
Registro: Loadjs 2 comienza
Registro: Loadjs 2 terminado
Registro: archivo 1 devolución de llamada completa es decir
Registro: archivo 2 devolución de llamada completa es decir

Firefox:

Escribir Begin
Escribir terminado
devolución de llamada JS externa, no es decir
loadjs 1 comienza
loadjs 1 terminado
File 1 devolución de llamada, no es decir
Loadjs 2 comienza
loadjs 2 terminado
File 2 devolución de llamada, no es decir

CROMO:

Lo anterior es la breve discusión del método de referencia de archivos JS y su ejecución síncrona y ejecución asincrónica que el editor le aporta. Espero que sea útil para todos y apoye a Wulin.com más ~