The async attribute of script loads scripts in non-blocking mode_javascript tips

1. HTML5 implements the async attribute of script . This new attribute allows js to be loaded in a non-blocking mode in the browser. In addition, script also has a defer attribute. This attribute is currently used by all browsers. All browsers have implemented it (except for early versions of Firefox and Chrome), and IE has done a good job in supporting these properties from the beginning.

Copy code The code is as follows:

//async


//defer

2. The difference between async and defer :
Scripts with async or defer will be downloaded immediately and will not block page parsing, and both provide an optional onload event processing, in the script Called after the download is completed to do some initialization work related to this script. The difference is that async is executed as soon as the download is completed (before the window.onload event) and does not ensure the order of execution, while defer ensures that js is executed in the order it is in the page (before the DOMContentLoaded event).
3. In order to solve browser compatibility issues, you can use the following code

Copy code The code is as follows:

function lazyload() {
var elem = document.createElement("script");
elem.type = "text/javascript";
elem. async = true;
elem.src = "js/dquery.js?v=11"; //Corresponding JS file
document.body.appendChild(elem);
}

if (window.addEventListener) {
window.addEventListener("load", lazyload, false);
} else if (window.attachEvent) {
window.attachEvent("onload", lazyload);
} else {
window.onload = lazyload;}

Since it is asynchronous loading, the corresponding js content needs to be used in the window.onload event. Writing it directly in the page will Report script errors, such as: