Three solutions for js asynchronous loading_javascript skills

By default, javascript is loaded synchronously, that is, javascript is blocked when loading. The subsequent elements must wait for javascript to be loaded before they can be loaded again. For some javascript that is not very meaningful, if it is placed at the head of the page, it will cause the loading to be very slow. If so, it will seriously affect the user experience.

(1) defer, only supports IE
Definition and usage of defer attribute (I took it from w3school website)
defer attribute specifies whether to delay script execution until the page until loaded.
Some javascript scripts use the document.write method to create the current document content, but other scripts may not.

If your script does not change the content of the document, you can add the defer attribute to the <script> tag to speed up processing of the document. Because the browser knows that it will be able to safely read the remainder of the document without executing the script, it will defer interpretation of the script until the document has been displayed to the user. <br>Example: <br></p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="71033" class="copybut" id="copybut71033" onclick="doCopy('code71033')"><u>Copy code</u></a></span> The code is as follows:</div> <div class="codebody" id="code71033"> <br><script type="text /javascript" defer="defer"> <br>alert(document.getElementById("p1").firstChild.nodeValue); <br></script>

( 2) async:
The definition and usage of async (it is an attribute of HTML5) The
async attribute specifies that once the script is available, it will be executed asynchronously.
Example:

Copy code The code is as follows:

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

(3) Create script, insert into DOM , callBack after loading, see code:

Copy code The 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);
}