快捷導(dǎo)航

JS異步加載的三種實現(xiàn)方式

更新時間：2017年03月16日 11:47:49 作者：Walker-lyl

本篇文章主要介紹了JS異步加載的三種實現(xiàn)方式，有些時候我們需要JS異步加載，這里整理了詳細(xì)的代碼,有需要的小伙伴可以參考下。

js加載的缺點：加載工具方法沒必要阻塞文檔，過多js加載會影響頁面效率，一旦網(wǎng)速不好，那么整個網(wǎng)站將等待js加載而不進(jìn)行后續(xù)渲染等工作。有些工具方法需要按需加載，用到再加載，不用不加載，。

默認(rèn)正常模式下下，JS是同步加載的，即優(yōu)先加載JS，只有當(dāng)JS文件下載完，dom和css才開始加載，當(dāng)某些時候我們需要JS異步加載，我們可以通過以下方式來設(shè)置異步加載,不同情況下選取不同方式即可

1.defer:defer

JS異步下載，dom結(jié)構(gòu)解析完（標(biāo)簽 + 樣式（內(nèi)容不一定下載完））才異步執(zhí)行
僅IE能用
內(nèi)部JS也能用該屬性
異步加載js不允許使用document.write，因為document.write會清除文檔流，js標(biāo)簽還未加載就會被清除
document.write()可用于初始化頁面

2.(h5)async:async（asynchronous） ajax(asynchronous javascript and XML)

JS異步加載，加載完畢后立刻異步執(zhí)行
IE8及以下不兼容
內(nèi)部JS不能用該屬性

3.除了以上兩種方法，還有一種兼容自己封裝的異步加載方式，即動態(tài)添加script標(biāo)簽也能實現(xiàn)異步加載。

function asyncLoaded(url,callBack){/*url為js的鏈接，callBack為url的js中的函數(shù)（該函數(shù)調(diào)用應(yīng)該寫到匿名函數(shù)中，如function(){console.log(div.getScrollOffset())}）*/
  var script = document.createElement('script');
  script.type = 'text/javascript';
  /*if else 這幾句話必須要寫到這位置處，不能放最后，因為if中js加載中script.readyState存在好幾種狀態(tài)，
  只有狀態(tài)改變‘readystatechange'事件才會觸發(fā)，但現(xiàn)在瀏覽器加載速度很快，當(dāng)解析到該事件時JS有可能已經(jīng)加載完，
  所以事件根本不會觸發(fā)，所以要寫到前面*/
  if(script.readystate){//兼容IE
    script.onreadystatechange = function() {//狀態(tài)改變事件才觸發(fā)
      if(script.readyState == 'loaded' || script.readyState == 'complete'){  
        callBack();
        script.onreadystatechange = null;    
      }
    }
  }else{
    script.onload = function(e){
      callBack();
    }
  }    
  script.src = url;
  document.body.appendChild(script);
}

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: