JS asynchronous loading method-JS Tutorial-php.cn

JS asynchronous loading method

一个新手

Release： 2017-09-21 10:00:14

Original

1858 people have browsed it

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>

Copy after login

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>

Copy after login

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)

Copy after login

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 == &#39;loaded&#39;||script.readyState ==&#39;complete&#39;){
    script.onreadystatechange = null;
    callback()
}
}  
}else{
    script.onload = function(){
    callback();
}
}
script.src = url;
document.getElementByTagName("head")[0].appendChild(script)
}

Copy after login

Calling method:

loadScript(&#39;files.js&#39;,function(){
    alert("file is loaded")
})

Copy after login

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);

Copy after login

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