JS異步加載的幾種方式

時間 2019-11-12

原文原文鏈接

一：同步加載

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

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

同步模式，又稱阻塞模式，會阻止瀏覽器的後續處理，中止後續的解析，只有噹噹前加載完成，才能進行下一步操做。因此默認同步執行纔是安全的。但這樣若是js中有輸出document內容、修改dom、重定向等行爲，就會形成頁面堵塞。因此通常建議把<script>標籤放在<body>結尾處，這樣儘量減小頁面阻塞。php

二：異步加載

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

方法一：也叫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);        
 })();

View Code

<async>屬性是HTML5中新增的異步支持。此方法被稱爲Script DOM Element 方法。Google Analytics 和 Google+ Badge 都使用了這種異步加載代碼.html

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

View Code

可是這種加載方式執行完以前會阻止onload事件的觸發，而如今不少頁面的代碼都在onload時還執行額外的渲染工做，因此仍是會阻塞部分頁面的初始化處理。html5

方法二：onload時的異步加載

(function(){
    if(window.attachEvent){
        window.attachEvent("onload", 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);
    }
)();

View Code

這種方法只是把插入script的方法放在一個函數裏面，而後放在window的onload方法裏面執行，這樣就解決了阻塞onload事件觸發的問題。java

注:DOMContentLoaded與load的區別。前者是在document已經解析完成，頁面中的dom元素可用，可是頁面中的圖片，視頻，音頻等資源未加載完，做用同jQuery中的ready事件；後者的區別在於頁面全部資源所有加載完畢。jquery

因爲JavaScript的動態性，還有不少異步加載方法： XHR Injection、 XHR Eval、 Script In Iframe、 Script defer屬性、 document.write(script tag)。

方法三：XHR Injection

//獲取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", "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);
        }
    }

View Code

方法四：XHR Eval

與XHR Injection對responseText的執行方式不一樣，直接把responseText放在eval()函數裏面執行。ajax

//獲取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", "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已經加載進來。click事件放在其它出會出問題，應該是還沒加載進來
    $("#btn1").click(function() {
      alert($(this).text());
    });
  }
}

View Code

方法五：Script In Irame

在父窗口插入一個iframe元素，而後再iframe中執行加載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();

View Code

方法六：GMail Mobile

頁內JS內容被註釋，因此不會執行，在須要的時候，獲取script中的text內容去掉註釋，調用eval()執行。緩存

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

方法七：HTML5新屬性

defer屬性：IE4.0就出現。defer屬聲明腳本中將不會有document.write和dom修改。瀏覽器會並行下載其餘有defer屬性的script。而不會阻塞頁面後續處理。注：全部的defer腳本必須保證按順序執行的。

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

async屬性：Html5新屬性。腳本將在下載後儘快執行，做用同defer，可是不能保證腳本按順序執行。他們將在onload事件以前完成。

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

Firefox 3.六、Opera 10.五、IE 9和最新的Chrome和Safari都支持async屬性。能夠同時使用async和defer，這樣IE 4以後的全部IE都支持異步加載。

沒有async屬性，script將當即獲取（下載）並執行，期間阻塞了瀏覽器的後續處理。若是有async屬性，那麼script將被異步下載並執行，同時瀏覽器繼續後續的處理。

總結：對於支持HTML5的瀏覽器，實現JS的異步加載只須要在script元素中加上async屬性，爲了兼容老版本的IE還需加上defer屬性；對於不支持HTML5的瀏覽器(IE能夠用defer實現)，能夠採用以上幾種方法實現。原理基本上都是向DOM中寫入script或者經過eval函數執行JS代碼，你能夠把它放在匿名函數中執行，也能夠在onload中執行，也能夠經過XHR注入實現，也能夠建立一個iframe元素，而後在iframe中執行插入JS代碼。

三：延遲加載

有些JS代碼在某些狀況在須要使用，並非頁面初始化的時候就要用到。延遲加載就是爲了解決這個問題。將JS切分紅許多模塊，頁面初始化時只加載須要當即執行的JS，而後其它JS的加載延遲到第一次須要用到的時候再加載。相似圖片的延遲加載。

JS的加載分爲兩個部分：下載和執行。異步加載只是解決了下載的問題，可是代碼在下載完成後就會當即執行，在執行過程當中瀏覽器處於阻塞狀態，響應不了任何需求。

解決思路：爲了解決JS延遲加載的問題，能夠利用異步加載緩存起來，但不當即執行，須要的時候在執行。如何進行緩存呢？將JS內容做爲Image或者Object對象加載緩存起來，因此不會當即執行，而後在第一次須要的時候在執行。

    1：模擬較長的下載時間：
    利用thread讓其sleep一段時間在執行下載操做。
    2：模擬較長的JS代碼執行時間
    var start = Number(new Date());
    while(start + 5000 > Number(new Date())){//執行JS}
    這段代碼將使JS執行5秒才完成！

JS延遲加載機制(LazyLoad)：簡單來講，就是在瀏覽器滾動到某個位置在觸發相關的函數，實現頁面元素的加載或者某些動做的執行。如何實現瀏覽器滾動位置的檢測呢？能夠經過一個定時器來實現，經過比較某一時刻頁面目標節點位置和瀏覽器滾動條高度來判斷是否須要執行函數。

一個LazyLoad例子：

原文:http://www.qiqiboy.com/2010/08/27/js-delayed-loading-mechanism-function-lazyload.html

最近應該你們都發現了，個人博客不少模塊都使用了延遲加載技術。這個延遲加載(lazyload)我第一次據說其實仍是不久前，那是在別人博客看到介紹的一個基於jQuery的圖片延遲加載插件。我對這個很感興趣，其實不少網站也都應用了這個技術，尤爲是大型網站，能夠有效地減小服務器壓力。

我原先以爲這個技術挺神祕的，實現起來應該比較困難，而且在網上也並無找到相關的文章或者介紹。可是當我真正決定要去這樣作時，卻發現其實這個真的挺簡單的，原理也容易理解。

lazyload，簡單地說，就是在瀏覽器滾動到某個位置時再出發相關函數，實現頁面元素的加載或者某些動做的執行。瀏覽器的滾動位置檢測，能夠通過一個定時器來循環檢測，經過比較某一時刻頁面目標節點位置和瀏覽器滾動條高度來判斷需不要要執行函數。我將這個方法寫成了一個類，我本身博客便是使用我的這個方法。

（下面代碼純屬本身的小試手，若是有不完善地方能夠指出）

 1  function Lazyload(func, obj) { //obj目標節點對象, func要觸發的函數
 2    this.func = func;
 3    this.obj = obj;
 4    this.it = setInterval(function() { //2s檢查一次
 5      this.checkScroll();
 6    }.bind(this), 2000); //bind爲setInterval綁定lazyload對象，不然this會指向window對象
 7  }
 8 
 9  Function.prototype.bind = function(obj) { //對象綁定
10    var __method = this;
11    return function() {
12      return __method.apply(obj, arguments);
13    };
14  }
15 
16  Lazyload.prototype.checkScroll = function() {
17    var scrollY = document.body.scrollTop || document.documentElement.scrollTop || window.pageYOffset || 0, //頁面滾動條高度
18      seeY = window.innerHeight || document.documentElement.clientHeight, //瀏覽器可視區域高度
19      func = this.func;
20    if (Math.abs(this.getY() - scrollY) < seeY) { //當目標節點進入可視區域，即頁面滾動條高度減去節點距頁面頂部距離小於瀏覽器可視高度
21      clearInterval(this.it); //清除定時器
22      return func();
23    }
24  }
25 
26  Lazyload.prototype.getY = function() { //目標節點距頁面頂部高度
27    var obj = this.obj;
28    tp = obj.offsetTop;
29    if (obj.offsetParent)
30      while (obj = obj.offsetParent) tp += obj.offsetTop;
31    return tp;
32  }

View Code

關於代碼的一些解釋都在註釋裏了。如何使用呢？
使用這個方法要經過new來新建類對象的方法。參數func便是要觸發的函數，obj便是頁面上某個節點對象，即當此obj節點進入可視區域時（瀏覽器滾動到此處）即觸發func函數。好比，你要實現當瀏覽器滾動到頁面上id爲「test」的節點（b）時觸發彈出窗口alert(‘yes’),能夠這麼作

1: function a(){alert('yes');}//要出發的函數
2: var b=document.getElementById('tests');//獲取頁面節點
3: new Lazyload(a,b);//使用new關鍵字創建對象執行

以上就是我本身的lazyload的所有代碼與實現方式了。固然，我相信它還有改進之處。
補充一些其餘的東西：
個人代碼中定時檢測的時間設定是2s，也就是說每兩秒去比較一次。若是你瀏覽器拖動太快，目標節點被很快的一閃而過，極可能此時就恰好沒有執行 checkScroll函數，因此也就不會觸發動做了。你能夠將時間改成更小的值（在第6行），如500ms，能夠避免大多數的快速拖動形成的問題。當然，我以爲其實不必，若是某人很快的拖動滾動條，說明他要瀏覽的東西在頁面底部，那麼實際上是不必加載他快速拖動過的節點的，因此2s我以爲是一個很合理的值。

另一個問題是個人代碼是隻觸發出如今可視區域中的節點動做，若是你想要實如今當前瀏覽的頁面以上部分的節點所有要加載，那麼能夠將代碼的第20行去掉Math.abs便可。若是要實如今滾動到距目標節點必定高度時就開始觸發函數，那麼可將20行的seeY改成seeY+200(200即爲設定的距離高度)。

關於lazyload的一個具體的實現，就還拿圖片的延遲加載來講吧。你能夠將圖片的地址都改爲一個默認的小圖片（這個能夠在後臺用php直接修改輸出，也能夠用js實現），將正真的圖片地址存到圖片的alt屬性中（也能夠指定一個自定義的屬性），而後對每一個圖片綁定new lazyload，要觸發的動做函數就是將alt中的值賦給src便可。這樣，就實現了圖片的lazyload（你就能夠消滅jQuery，消滅 jQuery的lazyload插件了，也就消滅了那100來K的JS文件）。若是再結合ajax技術，那麼也就能夠實現如我博客同樣的模塊延遲加載了。

（本文摘自網友的微博組合而成，並非我本人所寫。若有冒犯，敬請諒解並告知!）