JS非同步載入方法

defer與async

• #defer

html4為script標籤定義了擴充屬性： defer。 defer指明本元素所含的腳本不會修改dom，因此程式碼能安全地延遲執行。但是該屬性並不是理想的跨瀏覽器解決方案。此屬性只有IE4+和firefox3.5+的瀏覽器支援。用法如下：

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

帶有defer屬性的''script''標籤可以放置在文件的任何位置，當一個帶有defer屬性js檔案下載時，它不會阻塞瀏覽器的其他進程，因此這類文件可以與頁面中的其他資源並行下載。 帶有defer屬性的script標籤在dom載入完成（onload事件觸發前執行）

• #async
  html5規範引入了async屬性，用於非同步加載腳本。

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

async與defer的相同點是採用並行下載，在下載的過程中不會產生阻塞。差別在於async是載入完成後自動執行，而defer則需要等待頁面完成後執行。

動態創建script

主要原理：javascript可以動態創建html中幾乎所有的內容，所以我們可以利用javascript動態地創建script標籤並添加到html中。

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

我們可以使用以下方法追蹤並確保腳本下載完成並準備就緒：

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

呼叫方法：

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

XMLHttpRequest腳本注入

透過XHR物件取得腳本並注入到頁面

/获取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);

#

以上是JS非同步載入方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！