js異步加載的三種解決方案

原創

2020-02-20 15:40

默認情況javascript是同步加載的,javascript的加載時阻塞的，後面的元素要等待javascript加載完畢後才能進行再加載,如何解決這個問題呢,接下來將爲你詳細介紹下異步加載js三種實現方案,感興趣的你可以參考下哈

默認情況javascript是同步加載的，也就是javascript的加載時阻塞的，後面的元素要等待javascript加載完畢後才能進行再加載，對於一些意義不是很大的javascript，如果放在頁頭會導致加載很慢的話，是會嚴重影響用戶體驗的。

(1) defer，只支持IE
defer屬性的定義和用法（我摘自w3school網站）
defer 屬性規定是否對腳本執行進行延遲，直到頁面加載爲止。
有的 javascript 腳本 document.write 方法來創建當前的文檔內容，其他腳本就不一定是了。

如果您的腳本不會改變文檔的內容，可將 defer 屬性加入到 <script> 標籤中，以便加快處理文檔的速度。因爲瀏覽器知道它將能夠安全地讀取文檔的剩餘部分而不用執行腳本，它將推遲對腳本的解釋，直到文檔已經顯示給用戶爲止。
示例：

複製代碼代碼如下:

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

alert(document.getElementById("p1").firstChild.nodeValue); 

</script> 

(2) async：
async的定義和用法(是HTML5的屬性)
async 屬性規定一旦腳本可用，則會異步執行。
示例：

複製代碼代碼如下:

註釋：async 屬性僅適用於外部腳本（只有在使用 src 屬性時）。
註釋：有多種執行外部腳本的方法：
•如果 async="async"：腳本相對於頁面的其餘部分異步地執行（當頁面繼續進行解析時，腳本將被執行）
•如果不使用 async 且 defer="defer"：腳本將在頁面完成解析時執行
•如果既不使用 async 也不使用 defer：在瀏覽器繼續解析頁面之前，立即讀取並執行腳本

(3) 創建script，插入到DOM中，加載完畢後callBack，見代碼：

複製代碼代碼如下:

function loadScript(url, callback){
  var script = document.createElement_x("script")
  script.type = "text/javascript";
  if (script.readyState){ //IE
    script.onreadystatechange = function(){
      if (script.readyState == "loaded" || script.readyState == "complete"){
        script.onreadystatechange = null;
        callback();
      }
    };
  } else { //Others: Firefox, Safari, Chrome, and Opera
      script.onload = function(){
      callback();
    };
  }
script.src = url;
document.body.appendChild(script);
}