Qualquer arquivo JS introduzido no AppendChild (scriptNode) é executado de forma assíncrona (o scriptNode precisa ser inserido no documento, apenas criando nós e a configuração do SRC não carregará o arquivo JS, que é diferente do IMG e do carregamento)
O código na tag <Script> no arquivo html ou o código no arquivo JS referenciado pelo SRC é carregado e executado de forma síncrona
O código na tag <Script> no arquivo html é executado de forma assíncrona usando o método Document.Write ().
O arquivo JS introduzido usando o Document.Write () é executado de maneira síncrona no código do arquivo JS referenciado pelo atributo SRC no arquivo HTML.
1.
<cript> // carregamento síncrono de código executado </sCript>
2.
<script src = "xx.js"> </script> // Carregar e executar o código síncrono em xx.js
3.
<Cript> document.write ('<script src = "xx.js"> <// script>'); // Carregamento assíncrono para executar o código em xx.js </sCript> 4.
<script src = "xx.js"> </script>
Existe o seguinte código em xx.js:
document.write ('<script src = "11.js"> <// script>'); document.write ('<script src = "22.js"> <// script>');Depois xx.js, 11.js e 22.js são carregados e executados simultaneamente.
Se xx.js for carregado de forma assíncrona em inserção, 11.js e 22.js ainda são carregados de maneira síncrona (síncrona em assíncrono, ou seja, a carga desses 2 arquivos está em sequência)
Teste: Em Alert in 11, document.write () em 22, você pode ver que a declaração de gravação em 22 está bloqueada
5.
Da seguinte maneira, o xx.js carregará e executará assíncrono após a execução do AppendChild.
var script = document.createElement ("script"); script.setAttribute ("src", "xx.js"); documenrt.getElementsByTagName ("head") [0] .appendChild (script); Uma função que carrega um arquivo JS:
var loadjs = function (url, retorno de chamada) {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 () {// tag de script, há um evento ONReadySTATECHANGE sob o IE, o padrão W3C possui um evento ONLOAD // Esses estados Ready são para ie8 e abaixo não é que não se não seja bem -sucedido. (! this.readyState) é um padrão w3c if ((! this.readyState) || this.readyState == "complete" || this.readyState == "carregado") {chamada (); } else {alert ("não pode carregar o arquivo js")}}}Para os testes do ponto 4 (onde o alerta de inserção é fácil de ver bloqueando durante o carregamento)
Tryjs.html
<! Doctype html> <html> <head> <meta http-equiv = "content-type" content = "text /html; charset = utf-8" /> <script src = "tryjs.js" onload = "se (! ONREADESTATECHANGE = "Console.log ('retorno de chamada JS externo', this.readyState, 'ie');"> </script> <body> </body> </html> Tryjs.js
console.log ('write Begin'); document.write ('<script src = "try.1.js" oNreadyStateChange = "console.log (/' arquivo 1 chamado de chamada/', this.readystate./' ie/');" onload = "se (! /'); }"><//script>');document.write('<script src = "try.2.js" oNreadyStateChange = "console.log (/'arquivo 2 den -retorno/', this.readystate./ 'ie);" onload = "se (! /'); }"><//script>') ;console.log(write terminado '); try.1.js
console.log ('loadjs 1 começo'); console.log ('loadjs 1 terminado'); try.2.js
console.log ('loadjs 2 começo'); console.log ('loadjs 2 terminado');Resultados dos testes (o retorno de chamada completo do arquivo 2 e do arquivo 1 é incerto no pedido do IE7/8/9)
Ou seja, 7:
LOG: Carregando de chamada de chamada JS externo, ou seja,
LOG: Retorno de chamada JS externo carregado, ou seja,
LOG: Escreva comece
LOG: Escreva finalizada
LOG: Retorno de chamada JS externo Complete IE
Log: Arquivo 1 Retorno de chamada, ou seja,
LOG: Arquivo 2 Carregando de chamada, ou seja,
LOG: LOADJS 1 Comece
Log: loadjs 1 terminado
Log: loadjs 2 começam
Log: loadjs 2 terminado
Log: Arquivo 2 Retorno de chamada Completo IE
LOG: Arquivo 1 Retorno de chamada Complete IE
IE8:
LOG: Carregando de chamada de chamada JS externo, ou seja,
LOG: Retorno de chamada JS externo carregado, ou seja,
LOG: Escreva comece
LOG: Escreva finalizada
LOG: Retorno de chamada JS externo Complete IE
Log: Arquivo 1 Retorno de chamada, ou seja,
LOG: Arquivo 2 Carregando de chamada, ou seja,
LOG: LOADJS 1 Comece
Log: loadjs 1 terminado
Log: loadjs 2 começam
Log: loadjs 2 terminado
Log: Arquivo 2 Retorno de chamada Completo IE
LOG: Arquivo 1 Retorno de chamada Complete IE
IE9:
LOG: Escreva comece
LOG: Escreva finalizada
LOG: Retorno de chamada JS externo Complete IE
Log: Arquivo 1 Retorno de chamada, ou seja,
LOG: Arquivo 2 Carregando de chamada, ou seja,
LOG: LOADJS 1 Comece
Log: loadjs 1 terminado
Log: loadjs 2 começam
Log: loadjs 2 terminado
LOG: Arquivo 1 Retorno de chamada Complete IE
Log: Arquivo 2 Retorno de chamada Completo IE
Firefox:
Escreva Begin
Escreva terminado
retorno de chamada externa do JS, não ou seja
carregamentojs 1 começo
Loadjs 1 terminado
Arquivo 1 retorno de chamada, não ou seja
Loadjs 2 começa
Loadjs 2 terminado
Arquivo 2 retorno de chamada, não ou seja
CROMO:
Escreva Begin
Escreva terminado
retorno de chamada externa do JS, não ou seja
carregamentojs 1 começo
Loadjs 1 terminado
Arquivo 1 retorno de chamada, não ou seja
Loadjs 2 começa
Loadjs 2 terminado
Arquivo 2 retorno de chamada, não ou seja
O exposto acima é a breve discussão do método de referência de arquivo JS e sua execução síncrona e execução assíncrona que o editor traz para você. Espero que seja útil para todos e apoie mais wulin.com ~