JS asynchronous loading method

defer and async

• defer

html4 defines an extended attribute for the script tag: defer. defer specifies that the script contained in this element will not modify the DOM, so the code can be safely deferred. But this property is not an ideal cross-browser solution. This attribute is only supported by IE4+ and Firefox3.5+ browsers. The usage is as follows:

<script type=&#39;text/javascript&#39; src=&#39;test.js&#39; defer></script>

The ''script'' tag with the defer attribute can be placed anywhere in the document. When a js file with the defer attribute is downloaded, it will not block other processes of the browser. Therefore such files can be downloaded in parallel with other resources on the page. The script tag with the defer attribute is executed after the dom is loaded (before the onload event is triggered)

• ##async

  The HTML5 specification introduces the async attribute for asynchronous use Load script.
  

 <script type=&#39;text/javascript&#39; src=&#39;test.js&#39; async></script>

The similarity between async and defer is that parallel downloading is used, and no blocking occurs during the downloading process. The difference is that

async is automatically executed after loading is completed, while defer needs to wait for the page to be completed.

Dynamic creation of script

Main principle:

javascript can dynamically create almost all content in html, so we can use javascript to dynamically create script tags and add them to html .

var script = document.createElement("script");
  script.type = "text/javasctipt";
  script.src = "file.js";
  document.getElementByTagName("head")[0].appendChild(script)

We can use the following method to track and ensure that the script download is complete and ready:

function loadScript(url,callback){var script = document.createElement("script");
  script.type = "text/javasctipt";  //IE
  if(script.readyState){
        script.onreadystatechange = function(){
            if(script.readyState == 'loaded'||script.readyState =='complete'){
    script.onreadystatechange = null;
    callback()
}
}  
}else{
    script.onload = function(){
    callback();
}
}
script.src = url;
document.getElementByTagName("head")[0].appendChild(script)
}

Calling method:

loadScript('files.js',function(){
    alert("file is loaded")
})

XMLHttpRequest script injection

Get the script through the XHR object and inject it into the page

/获取XMLHttpRequest对象，考虑兼容性。  var getXmlHttp = function(){
    var obj;    if (window.XMLHttpRequest)
      obj = new XMLHttpRequest();    else
      obj = new ActiveXObject("Microsoft.XMLHTTP");    return obj;
  }; 
  //采用Http请求get方式;open()方法的第三个参数表示采用异步(true)还是同步(false)处理
  var xmlHttp = getXmlHttp();
  xmlHttp.open("GET", "file3.js", true);

  xmlHttp.onreadystatechange = function(){
    if (xmlHttp.readyState == 4 {    if(xmlHttp.status >=200 && xmlHttp.status<300 || xmlHttp.status == 304){ var script = document.createElement("script");
      script.text = xmlHttp.responseText;
      document.body.appendChild(script);
}
    }
  } 
  xmlHttp.send(null);

The above is the detailed content of JS asynchronous loading method. For more information, please follow other related articles on the PHP Chinese website!