Three solutions for js asynchronous loading

By default, javascript is loaded synchronously, that is, it is blocked during javascript loading. The subsequent elements can be loaded only after javascript loading is complete. For some javascript that is not very significant, if it is placed in the page header, loading will be slow, which will seriously affect the user experience.

(1) defer, only supports IE
Defer attribute definition and usage (from w3school website)
The defer attribute specifies whether the script execution is delayed until the page is loaded.
Some javascript scripts use the document. write method to create the current document content. Other scripts are not necessarily the same.

If your script does not change the content of the document, you can add the defer attribute to the <script> label to speed up document processing. Because the browser knows that it will be able to safely read the rest of the document without executing the script, it will postpone the interpretation of the script until the document has been displayed to the user.
Example:
Copy codeThe Code is as follows:
<Script type = "text/javascript" defer = "defer">
Alert (document. getElementById ("p1"). firstChild. nodeValue );
</Script>

(2) async:
Definition and usage of async (HTML5 attributes)
The async attribute specifies that the script will be executed asynchronously once the script is available.
Example:
Copy codeThe Code is as follows:
<Script type = "text/javascript" src = "demo_async.js" async = "async"> </script>

Note: The async attribute applies only to external scripts (only when the src attribute is used ).
Note: There are multiple ways to execute external scripts:
• If async = "async": the script is executed asynchronously relative to the rest of the page (when the page continues to be parsed, the script will be executed)
• If async is not used and defer = "defer": the script will be executed when parsing is completed on the page.
• If neither async nor defer is used: read and execute the script immediately before the browser continues parsing the page

(3) create a script and insert it to the DOM., CallBack after loading, see the code:
Copy codeThe Code is as follows:
Function loadScript (url, callback ){
Var script = document. createElement_x ("script ")
Script. type = "text/javascript ";
If (script. readyState) {// IE
Script. onreadystatechange = function (){
If (script. readyState = "loaded" |
Script. readyState = "complete "){
Script. onreadystatechange = null;
Callback ();
}
};
} Else {// Others: Firefox, Safari, Chrome, and Opera
Script. onload = function (){
Callback ();
};
}
Script. src = url;
Document. body. appendChild (script );
}