快捷導航

詳解JS異步加載的三種方式

更新時間：2017年03月07日 10:43:53 作者：Vin1992

這篇文章主要介紹了詳解JS異步加載的三種方式,非常不錯，具有參考借鑒價值，需要的朋友可以參考下

一：同步加載

我們平時使用的最多的一種方式。

<script src="http://yourdomain.com/script.js"></script>
<script src="http://yourdomain.com/script.js"></script>

同步模式，又稱阻塞模式，會阻止瀏覽器的后續(xù)處理，停止后續(xù)的解析，只有當當前加載完成，才能進行下一步操作。所以默認同步執(zhí)行才是安全的。但這樣如果js中有輸出document內(nèi)容、修改dom、重定向等行為，就會造成頁面堵塞。所以一般建議把<script>標簽放在<body>結(jié)尾處，這樣盡可能減少頁面阻塞。

二：異步加載

異步加載又叫非阻塞加載，瀏覽器在下載執(zhí)行js的同時，還會繼續(xù)進行后續(xù)頁面的處理。主要有三種方式。

方法一：也叫Script DOM Element

(function(){
  var scriptEle = document.createElement("script");
  scriptEle.type = "text/javasctipt";
  scriptEle.async = true;
  scriptEle.src = "http://cdn.bootcss.com/jquery/3.0.0-beta1/jquery.min.js";
  var x = document.getElementsByTagName("head")[0];
  x.insertBefore(scriptEle, x.firstChild); 
 })();
<async>屬性是HTML5中新增的異步支持。此方法被稱為Script DOM Element 方法。Google Analytics 和 Google+ Badge 都使用了這種異步加載代碼
(function(){;
  var ga = document.createElement('script'); 
  ga.type = 'text/javascript'; 
  ga.async = true; 
  ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; 
  var s = document.getElementsByTagName('script')[0]; 
  s.parentNode.insertBefore(ga, s); 
})();

但是這種加載方式執(zhí)行完之前會阻止onload事件的觸發(fā)，而現(xiàn)在很多頁面的代碼都在onload時還執(zhí)行額外的渲染工作，所以還是會阻塞部分頁面的初始化處理。

方法二：onload時的異步加載

(function(){
 if(window.attachEvent){
   window.attachEvent("load", asyncLoad);
  }else{
   window.addEventListener("load", asyncLoad);
  }
  var asyncLoad = function(){
   var ga = document.createElement('script'); 
    ga.type = 'text/javascript'; 
    ga.async = true; 
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; 
    var s = document.getElementsByTagName('script')[0]; 
    s.parentNode.insertBefore(ga, s);
  }
)();

這種方法只是把插入script的方法放在一個函數(shù)里面，然后放在window的onload方法里面執(zhí)行，這樣就解決了阻塞onload事件觸發(fā)的問題。

注:DOMContentLoaded與load的區(qū)別。前者是在document已經(jīng)解析完成，頁面中的dom元素可用，但是頁面中的圖片，視頻，音頻等資源未加載完，作用同jQuery中的ready事件；后者的區(qū)別在于頁面所有資源全部加載完畢。

方法三：其他方法

由于JavaScript的動態(tài)性，還有很多異步加載方法： XHR Injection、 XHR Eval、 Script In Iframe、 Script defer屬性、 document.write(script tag)。

XHR Injection(XHR 注入)：通過XMLHttpRequest來獲取JavaScript，然后創(chuàng)建一個script元素插入到DOM結(jié)構(gòu)中。ajax請求成功后設(shè)置script.text為請求成功后返回的responseText。

 //獲取XMLHttpRequest對象，考慮兼容性。
  var getXmlHttp = function(){
    var obj;
    if (window.XMLHttpRequest)
      obj = new XMLHttpRequest();
    else
      obj = new ActiveXObject("Microsoft.XMLHTTP");
    return obj;
  }; 
  //采用Http請求get方式;open()方法的第三個參數(shù)表示采用異步(true)還是同步(false)處理
  var xmlHttp = getXmlHttp();
  xmlHttp.open("GET", "http://cdn.bootcss.com/jquery/3.0.0-beta1/jquery.min.js", true);
  xmlHttp.send(); 
  xmlHttp.onreadystatechange = function(){
    if (xmlHttp.readyState == 4 && xmlHttp.status == 200){
      var script = document.createElement("script");
      script.text = xmlHttp.responseText;
      document.getElementsByTagName("head")[0].appendChild(script);
    }
  } 
XHR Eval：與XHR Injection對responseText的執(zhí)行方式不同，直接把responseText放在eval()函數(shù)里面執(zhí)行。
  //獲取XMLHttpRequest對象，考慮兼容性。
  var getXmlHttp = function(){
    var obj;
    if (window.XMLHttpRequest)
      obj = new XMLHttpRequest();
    else
      obj = new ActiveXObject("Microsoft.XMLHTTP");
    return obj;
  }; 
  //采用Http請求get方式;open()方法的第三個參數(shù)表示采用異步(true)還是同步(false)處理
  var xmlHttp = getXmlHttp();
  xmlHttp.open("GET", "http://cdn.bootcss.com/jquery/3.0.0-beta1/jquery.min.js", true);
  xmlHttp.send(); 
  xmlHttp.onreadystatechange = function(){
    if (xmlHttp.readyState == 4 && xmlHttp.status == 200){
      eval(xmlHttp.responseText);
      //alert($);//可以彈出$,表明JS已經(jīng)加載進來。click事件放在其它出會出問題，應(yīng)該是還沒加載進來
      $("#btn1").click(function(){
        alert($(this).text());
      });
    }
  }

Script In Irame：在父窗口插入一個iframe元素，然后再iframe中執(zhí)行加載JS的操作。

 var insertJS = function(){alert(2)};
  var iframe = document.createElement("iframe");
  document.body.appendChild(iframe);
  var doc = iframe.contentWindow.document;//獲取iframe中的window要用contentWindow屬性。
  doc.open();
  doc.write("<script>var insertJS = function(){};<\/script><body onload='insertJS()'></body>");
  doc.close();

GMail Mobile：業(yè)內(nèi)JS內(nèi)容被注釋，所以不會執(zhí)行，在需要的時候，獲取script中的text內(nèi)容去掉注釋，調(diào)用eval()執(zhí)行。

  <script type="text/javascript"> 
  /* 
  var ... 
  */ 
  </script>

HTML5新屬性：async和defer屬性

defer屬性：IE4.0就出現(xiàn)。defer屬聲明腳本中將不會有document.write和dom修改。瀏覽器會并行下載其他有defer屬性的script。而不會阻塞頁面后續(xù)處理。注：所有的defer腳本必須保證按順序執(zhí)行的。

  <script type="text/javascript" defer></script>

async屬性：Html5新屬性。腳本將在下載后盡快執(zhí)行，作用同defer，但是不能保證腳本按順序執(zhí)行。他們將在onload事件之前完成。

  <script type="text/javascript" defer></script>

Firefox 3.6、Opera 10.5、IE 9和最新的Chrome和Safari都支持async屬性?？梢酝瑫r使用async和defer，這樣IE 4之后的所有IE都支持異步加載。

沒有async屬性，script將立即獲?。ㄏ螺d）并執(zhí)行，期間阻塞了瀏覽器的后續(xù)處理。如果有async屬性，那么script將被異步下載并執(zhí)行，同時瀏覽器繼續(xù)后續(xù)的處理。

總結(jié)：對于支持HTML5的瀏覽器，實現(xiàn)JS的異步加載只需要在script元素中加上async屬性，為了兼容老版本的IE還需加上defer屬性；對于不支持Html5的瀏覽器(IE可以用defer實現(xiàn))，可以采用以上幾種方法實現(xiàn)。原理基本上都是向DOM中寫入script或者通過eval函數(shù)執(zhí)行JS代碼，你可以把它放在匿名函數(shù)中執(zhí)行，也可以在onload中執(zhí)行，也可以通過XHR注入實現(xiàn)，也可以創(chuàng)建一個iframe元素，然后在iframe中執(zhí)行插入JS代碼。

三：延遲加載

有些JS代碼在某些情況在需要使用，并不是頁面初始化的時候就要用到。延遲加載就是為了解決這個問題。將JS切分成許多模塊，頁面初始化時只加載需要立即執(zhí)行的JS，然后其它JS的加載延遲到第一次需要用到的時候再加載。類似圖片的延遲加載。
JS的加載分為兩個部分：下載和執(zhí)行。異步加載只是解決了下載的問題，但是代碼在下載完成后就會立即執(zhí)行，在執(zhí)行過程中瀏覽器處于阻塞狀態(tài)，響應(yīng)不了任何需求。

解決思路：為了解決JS延遲加載的問題，可以利用異步加載緩存起來，但不立即執(zhí)行，需要的時候在執(zhí)行。如何進行緩存呢？將JS內(nèi)容作為Image或者Object對象加載緩存起來，所以不會立即執(zhí)行，然后在第一次需要的時候在執(zhí)行。

1：模擬較長的下載時間：

利用thread讓其sleep一段時間在執(zhí)行下載操作。

2：模擬較長的JS代碼執(zhí)行時間

  var start = Number(new Date());
  while(start + 5000 > Number(new Date())){//執(zhí)行JS}

這段代碼將使JS執(zhí)行5秒才完成！

JS延遲加載機制(LazyLoad)：簡單來說，就是在瀏覽器滾動到某個位置在觸發(fā)相關(guān)的函數(shù)，實現(xiàn)頁面元素的加載或者某些動作的執(zhí)行。如何實現(xiàn)瀏覽器滾動位置的檢測呢？可以通過一個定時器來實現(xiàn)，通過比較某一時刻頁面目標節(jié)點位置和瀏覽器滾動條高度來判斷是否需要執(zhí)行函數(shù)。

以上所述是小編給大家介紹的詳解JS異步加載的三種方式，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章: