異步加載js方法整合與封裝與js加載時間線

目錄

• 異步加載js方法與js加載時間線
• • js加載時間線
  • 異步加載JS
  • • • • 封裝 loadScript ： //按需加載執行,也就是說隻想用庫裡某個方法才會用到

異步加載js方法與js加載時間線

學習筆記中摘取出來并整理的，是關于異步加載與時間線的内容，希望讓更多的小夥伴能從中學習更多關于js的知識

js加載時間線

1.建立Document對象，開始解析web頁面。解析HTML元素和他們的文本内容後添加Element對象和Text節點到文檔中。這個階段document.readyState = ‘loading’。

2.遇到link外部css，建立線程加載，并繼續解析文檔。

3.遇到script外部js，并且沒有設定async、defer，浏覽器加載，并阻塞，等待js加載完成并執行該腳本，然後繼續解析文檔。

4.遇到script外部js，并且設定有async、defer，浏覽器建立線程加載，對于async屬性的腳本，腳本加載完成後立即執行。(異步禁止使用document.write())

5.遇到img标簽，先正常解析dom結構，然後浏覽器異步加載src，并繼續解析文檔。

6.當文檔解析完成，document.readyStart=‘interactive’。

7.文檔解析完成後，所有設定有defer的腳本會按照順序執行。(注意async的不同，但同樣禁止使用document.write())

8.document對象觸發DOMContentLoaded事件，這也标志着程式執行從同步執行階段，轉化為事件驅動階段。

9.當所有async的腳本加載完并執行後、img等加載完成後，document.readyStart=‘complete’，window對象觸發load事件。

10.從此，以異步響應方式處理使用者輸入、網絡事件等。

異步加載JS

異步加載有三種方法

1.defer //IE有 IE9以下能用

整個dom文檔解析完，才執行，能把js寫在script标簽裡

eg:

2.async //除了低版本IE都能用

與上邊一樣替換即可
           

加載完就執行，async 隻能加載外部腳本，不能把js寫在script标簽裡

1和2執行時不會賭賽頁面

3.建立script，插入dom中，加載完畢後callBack

eg:

var script=document.createElement('script');
  script.type = "text/javascript";
  script.src = "tools.js";                        //由于是異步下載下傳，系統往下走，直接調用裡邊的方法會報錯的，得等一會
  document.head.appendChild(script);
           

優化：

var script=document.createElement('script');
  script.type = "text/javascript";
  script.src = "tools.js";   
①
//下邊隻有IE有
script.readyState ="loading"  //加載完時會變成loaded或complete
//當狀态碼發生改變時會觸發onreadystatechange事件
script.onreadystatechange = function(){
  if(script.readyState == "complete" || script.readyState == "loaded"){
  test();     //調用裡邊的方法
}
}
②
//除了IE的浏覽器  判斷是否加載完js
script.onload=function(){  //加載完，執行方法
//相容性特别強Safari chrome firefox opera
  test();     //調用裡邊的方法
}
           

整合：

var script=document.createElement('script');
  script.type = "text/javascript";
  script.src = "tools.js";
if(script.readyState){
  script.onreadystatechange = function(){
    if(script.readyState == "complete" || script.readyState == "loaded"){
    test();
    }
  }
}else{
  script.onload=function(){  //加載完，執行方法
//相容性特别強Safari chrome firefox opera
    test();     //調用裡邊的方法
  }
  
}
  document.head.appendChild(script);
           

封裝 loadScript ： //按需加載執行,也就是說隻想用庫裡某個方法才會用到

//如果想加載工具庫沒必要傳回調函數，監控加載完就行了傳回一個信号

function  loadScript(url,callback) {
    var script=document.createElement('script');
    script.type = "text/javascript";
    if(script.readyState){
      script.onreadystatechange = function(){  //IE
        if(script.readyState == "complete" || script.readyState == "loaded"){
          callback(); //調用裡邊的方法
        }
      }
    }else{
      script.onload=function(){  //加載完，執行方法
//相容性特别強Safari chrome firefox opera
        callback();     //調用裡邊的方法
      }
    }
    script.src = url;   //為了避免狀态瞬間變化完無法綁定IE監聽是以放到了綁定下邊，先綁定後下載下傳
    document.head.appendChild(script);
  }
  loadScript('demo.js',function () {  //不可以直接傳 test，程式不會識别，會出現test沒定義錯誤，可以使用匿名函數
    test();
  });
//還有一種 不安全的方法
//eval() 方法或setInterval()  把裡邊字元串當代碼執行
//eval( callback)；//替換  callback();
// loadScript('demo.js','test()');
//還有一種
//tools[callback]();   //替換  callback();    tools指的是函數庫
//比如   var tools ={   
//                     test : function(){  },
//                   demo : function(){  },
//                         }
// loadScript('demo.js','test');
           

關于異步加載js方法整合與封裝與js加載時間線的内容到這裡就結束了，歡迎大家在下方評論與分享心得。。。