Detailed explanation of script attributes in HTML5 and js synchronization and asynchronous loading implementation code

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 compared to HTML4.01, and modified the type attribute to be 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 The code in the <script> tag in the <br/>html file is executed asynchronously. The js file introduced using document.write() is executed asynchronously. The <script> tag in the <br/>html file is referenced by the src attribute. 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/>pNode.innerHTML = '<script src="xxx.js"></script>';
window.onload event will be executed in js It is triggered only after the file is loaded (even if it is loaded asynchronously)

1、 
<script> 
//同步加载执行的代码 
</script> 
2、 
<script src="xx.js"></script> //同步加载执行xx.js中的代码 
3、 
<script> 
document.write(&#39;<script src="xx.js"><\/script>&#39;); //异步加载执行xx.js中的代码 
</script> 
4、 
<script src="xx.js"></script>

xx.js has the following code:

document.write(&#39;<script src="11.js"><\/script>&#39;); 
document.write(&#39;<script src="22.js"><\/script>&#39;);

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

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

6. Use the Image object to asynchronously preload the js file (will not be executed)
Image’s src A request is initiated when it is assigned a value, and it is not picky about the file type (the image may also be dynamically created by a script, such as a verification code), so the URL of the js file can be assigned to image.src, and the js will be cached by the browser after being loaded.

var img = new Image(); 
img.onload = function(){ alert(1); } ; //由于返回的js文件 MIME 不是图片，onload回调函数并不会被触发
img.src = 'http://localhost/test/loadjs/try.2.js'; 
var s = document.createElement("script"); 
var h = document.getElementsByTagName("head")[0]; 
//执行 js 
s.src=img.src; 
h.appendChild(s);

A function that loads js files:

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 标签，IE 下有 onreadystatechange 事件, w3c 标准有 onload 事件 
//这些 readyState 是针对IE8及以下的，W3C 标准的 script 标签没有 onreadystatechange 和 this.readyState , 
//文件加载不成功 onload 不会执行， 
//(!this.readyState) 是针对 W3C标准的, IE 9 也支持 W3C标准的 onload 
if ((!this.readyState) || this.readyState == "complete" || this.readyState == "loaded" ){ 
callback(); 
} 
}//end onreadystatechange 
}

For the test at point 4 (synchronous loading) (inserting alert in it makes it easy to see the blocking during loading).

The above is the detailed content of Detailed explanation of script attributes in HTML5 and js synchronization and asynchronous loading implementation code. For more information, please follow other related articles on the PHP Chinese website!