Any js file introduced in appendChild(scriptNode) is executed asynchronously (scriptNode needs to be inserted into the document, only creating nodes and setting src will not load the js file, which is different from img's and loading)
The code in the <script> tag in the html file or the code in the js file referenced by src is loaded and executed synchronously
The code in the <script> tag in the html file is executed asynchronously using document.write() method.
The js file introduced using document.write() method is executed synchronously in the code of the js file referenced by the src attribute in the html file.
1.
<script>//Synchronous loading of code executed</script>
2.
<script src="xx.js"></script> //Synchronously load and execute code in xx.js
3.
<script>document.write('<script src="xx.js"><//script>'); //Asynchronous loading to execute code in xx.js</script> 4.
<script src="xx.js"></script>
There is the following code in xx.js:
document.write('<script src="11.js"><//script>'); document.write('<script src="22.js"><//script>');Then xx.js, 11.js, and 22.js are loaded and executed simultaneously.
If xx.js is loaded asynchronously in insertion, 11.js and 22.js are still loaded synchronously (synchronous in asynchronous, that is, the loading of these 2 files is in sequence)
Test: In alert in 11, document.write() in 22, you can see that the write statement in 22 is blocked
5.
In the following way, xx.js will load and execute asynchronously after appendChild is executed.
var script = document.createElement("script");script.setAttribute("src","xx.js");documenrt.getElementsByTagName("head")[0].appendChild(script); A function that loads a js file:
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, there is onreadystatechange event under IE, w3c standard has onload event//These readyStates are for IE8 and below, W3C The standard is that the script tag does not have this onreadystatechange, so there will be no this.readyState, // Fortunately, the file loading is not successful and the onload will not be executed. (!this.readyState) is a W3C standard if ((!this.readyState) || this.readyState == "complete" || this.readyState == "loaded" ){ callback(); } else { alert("can not load the js file") } } }For point 4 tests (where insertion alert is easy to see blocking during loading)
tryjs.html
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><script src="tryjs.js" onload="if(!document.all){console.log('outer js callback, not IE');}" onreadystatechange="console.log('outer js callback ',this.readyState,' IE');"></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(/'file 1 callback,NOT 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,NOT IE /');}"><//script>');console.log('write finished'); try.1.js
console.log('loadjs 1 begin');console.log('loadjs 1 finished'); try.2.js
console.log('loadjs 2 begin');console.log('loadjs 2 finished');Test results (the callback complete of file 2 and file 1 is uncertain in IE7/8/9 order)
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
The above is the brief discussion of js file reference method and its synchronous execution and asynchronous execution that the editor brings to you. I hope it will be helpful to everyone and support Wulin.com more~