Implementation principles of synchronous loading and asynchronous loading of javascript files_javascript skills

HTML 4.01 script attribute
charset: Optional. Specifies the character set of the code introduced by src. Most browsers ignore this value.
defer: boolean, optional. Delaying script execution is equivalent to placing the script tag at the bottom of the body tag of the page. The js script will be executed before DOMContentLoaded of the document. Except for IE and newer versions of Firefox, other browsers are not supported.
language: Deprecated. Most browsers ignore this value.
src: optional. Specify the imported external code file, without limiting the suffix name.
type: required. Specifies the content type (MIME type) of the script. In reality, it is usually not necessary to specify this value. The browser will interpret and execute it as text/javascript type by default.

script attribute in HTML5 : In addition to the attributes defined by the new HTML5 standard, the
script tag in HTML5 has removed the language attribute and modified it compared to HTML4.01. The type attribute is optional (default text/javascript), and a new attribute async is added.
async: boolean, the role of the attribute, defines whether the script is executed asynchronously, the value is true or false.
If async is set to true , the defer attribute will be ignored.
Asynchronously executed js files are assumed not to use document.write() to write content to the loading document, so do not use document.write() during the loading and execution of asynchronously executed js files
Except In addition to the script tag attribute, the way the page introduces the js file affects its loading and execution mode:
Any js file introduced by adding a script node (such as appendChild(scriptNode)) is executed asynchronously (scriptNode needs to be inserted into the document, Just creating the node and setting src will not load the js file, which is not analogous to the preloading of img)
The code in the <script> tag in the html file or the code in the js file referenced by src is loaded synchronously And the code in the <script> tag in the executed <br>html file uses the document.write() method to introduce the js file which is referenced by the src attribute of the <script> tag in the <br>html file that is executed asynchronously. The js file introduced using the document.write() method in the code of the js file is executed synchronously <br>Use the Image object to asynchronously preload the js file (will not be executed) <br><br>Do not use something like the following This method will not initiate a request to load the js file: <br>divNode.innerHTML = '<script src="xxx.js"></script>';
window.onload event will be executed in js Triggered only after the file is loaded (even if it is loaded asynchronously)
====================================== =================
1.
<script> <br>//Synchronously load the executed code <br></script>
2.
//Synchronously load and execute the code in xx.js
3.
<script> <br>document. write('<script src="xx.js"></script>'); //Asynchronously load and execute the code in xx.js

4,

xx.js contains the following code:

Copy code The code is as follows:

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

Then xx.js, 11.js, and 22.js are all loaded and executed synchronously.
If xx.js, 11.js and 22.js are loaded asynchronously by inserting script nodes, then 11.js and 22.js are loaded asynchronously.
If xx.js is loaded asynchronously by inserting script nodes, 11.js and 22.js are loaded in document.write(script) mode, then 11.js and 22.js are loaded synchronously (tested by the latest browser, under chrome, the asynchronous loading execution of xx.j is no longer available document.write() writes content to the document, but firefox and IE can write before the document is closed (the method is to use alert in html to prevent the document from closing))
Test: alert() in 11.js ( Do not use a for loop, the browser is executed in a single thread, and continuing to execute any piece of code will cause the rest of the code to be blocked), console.log() in 22.js, you can see that the code in 22.js is blocked
5.
In the following method, xx.js will be loaded and executed asynchronously after appendChild is executed

Copy the code The code is as follows:

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

6. Use the Image object to asynchronously preload js files (will not be executed)
The request is initiated when the src of the Image is assigned, and the file type is not picky (the image may also be dynamically created by a script, such as Verification code), so you can assign the url of the js file to image.src, and the js will be cached by the browser after loading.

Copy code The code is as follows:

var img = new Image();
img.onload = function(){ alert(1); }; //Since the returned js file MIME is not an image, The onload callback function will not be triggered
img.src = 'http://localhost/test/loadjs/try.2.js';
var s = document.createElement("script");
var h = document.getElementsByTagName("head")[0];
//Execute js
s.src=img.src;
h.appendChild(s);

A function to load js files:

Copy code The code is as follows:

var loadJS = function(url,callback){
var head = document.getElementsByTagName('head');
if(head&&head.length){
head = head[0];
}else{
head = document.body;
}
var script = document.createElement('script');
script.src = url;
script.type = "text/javascript";
head.appendChild( script);
script.onload = script.onreadystatechange = function(){
//Script tag, IE has onreadystatechange event, w3c standard has onload event
//These readyState It is for IE8 and below. The W3C standard script tag does not have onreadystatechange and this.readyState.
//Onload will not be executed if the file is not loaded successfully.
//(!this.readyState) is for the W3C standard. IE 9 also supports the W3C standard onload
if ((!this.readyState) || this.readyState == "complete" || this.readyState == "loaded" ){
callback();
}
}//end onreadystatechange
}

For the test of point 4 (synchronous loading) (inserting alert makes it easy to see the blocking during loading)
tryjs .html

Copy code The code is as follows:

< ;html>

tryjs .js

Copy code The code is as follows:

console.log('write begin');
document.write('');
document.write('');
console.log('write finished');

try.1.js

Copy code The code is as follows:

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

try.2.js

Copy code The code is as follows:

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

Test results (the order of callback complete of file 2 and file 1 is uncertain in IE789)
IE 7:
Log: outer js callback loading IE
Log: outer js callback loaded IE
Log : write begin
log: write finished
log: outer js callback complete IE
log: file 1 callback loading IE
log: file 2 callback loading IE
log: loadjs 1 begin
Log: loadjs 1 finished
Log: loadjs 2 begin
Log: loadjs 2 finished
Log: file 2 callback complete IE
Log: file 1 callback complete IE

IE8:
Log: outer js callback loading IE
Log: outer js callback loaded IE
Log: write begin
Log: write finished
Log: outer js callback complete IE
Log: file 1 callback loading IE
log: file 2 callback loading IE
log: loadjs 1 begin
log: loadjs 1 finished
log: loadjs 2 begin
log: loadjs 2 finished
log : file 2 callback complete IE
log: file 1 callback complete IE

IE9:
log: write begin
log: write finished
log: outer js callback complete IE
Log: file 1 callback loading IE
Log: file 2 callback loading IE
Log: loadjs 1 begin
Log: loadjs 1 finished
Log: loadjs 2 begin
Log: loadjs 2 finished
Log: file 1 callback complete IE
Log: file 2 callback complete IE

FIREFOX:
write begin
write finished
outer js callback, not IE
loadjs 1 begin
loadjs 1 finished
file 1 callback,NOT IE
loadjs 2 begin
loadjs 2 finished
file 2 callback,NOT IE

CHROME:
write begin
write finished
outer js callback, not IE
loadjs 1 begin
loadjs 1 finished
file 1 callback,NOT IE
loadjs 2 begin
loadjs 2 finished
file 2 callback,NOT IE