js順序加載與並行加載


  前端優化過程中常提到js的加載方式,下面說下幾種常用的加載方式:

  1:head標簽內插入<script>標簽

  <script type="text/javaScript" src="test.js"></script>

  這是最常見的方法,但是這個方法有個最大的問題,就是當瀏覽器解析到<script>標簽時,瀏覽器會停止解析其后的內容,而優先下載腳本文件,並執行其中的代碼,是個阻塞的過程,這意味着,其后的test.css樣式文件和<body>標簽都無法被加載,由於<body>標簽和樣式等資源無法被加載,那么頁面自然就無法渲染了,因此常常頁面打開會出現頁面內容空白或者樣式丟失問題,這都是在頭部引入了過多的js文件阻塞加載造成的,雖然高版本的瀏覽器已經可以對腳本並行加載,可是還有些瀏覽器腳本依舊是一個接一個加載的,因此優化的話可以把js放在body標簽最底部,這樣頁面可以先快速顯示出來,提高了體驗友好度。

 

  2:創建動態腳本

var script=document.createElement('script'); script.type='text/javaScript'; script.src='test.js'; document.getElementsByTagName('head')[0].appendChild(script);

  上述代碼動態創建了一個<script>標簽,並添加在<head>標簽內,無論在何時啟動下載,文件的下載和執行過程不會阻塞頁面其他內容的加載執行。此方法比較常見,我們常用的一些第三方庫中,很多都采用這種方式。然而這種方式有個最大的問題就是無法保證多個腳本之間的加載順序,比如我寫了一個代碼,這個代碼要依賴於jQuery,但是如果我這個文件優先於jQuery腳本先下載完並立即執行,這時瀏覽器會報錯——‘jQuery未定義’之類的,因為此時jQuery庫還未下載完成。

 

  3:LABjs

  可以幫我們完成腳本的並行加載和按順序執行,這也是我們公司目前用的主要方式,想要看詳細的用法去官網看看。

  常見用法:

  1,

$LAB.script("script1.js") .script("script2.js") .script("script3.js") .wait(function(){// 等待所有script加載完再執行這個代碼塊
 script1Func(); script2Func(); script3Func(); });

 

  2,

$LAB.script("script1.js") .wait() // 空的wait()只是確保script1在其他代碼之前被執行
    .script("script2.js")    // script2 和 script3 依賴於 script1
    .script("script3.js") .wait() // 但是script2 和 script3 並不互相依賴,可以並行下載
    .script("script4.js")    //script4 依賴於 script1, script2 及 script3
    .wait(function(){script4Func();});

  3,

$LAB.script("script1.js")    // script1, script2, and script3 之間沒有依賴關系, 
    .script("script2.js")    // 所以可以任意順序執行
    .script("script3.js") .wait(function(){    // 如果需要,這里當然可以執行javascript函數
        alert("Scripts 1-3 are loaded!"); }) .script("script4.js")    // 依賴於 script1, script2 及 script3 
    .wait(function(){script4Func();});

  上面實例中,前面三個腳本並行加載,任意順序執行,如果有依賴並且腳本很多的話,沒一個script函數后面接個wait就閑的代碼很臃腫麻煩,所以labjs庫提供了個參數可以確保下載完后順序執行

$LAB.setOptions({AlwaysPreserveOrder:true})// 設置每個腳本之間等待
    .script("script1.js")// script1, script2, script3, script4 互相依賴
    .script("script2.js")// 並且並行下載后循序執行
    .script("script3.js") .script("script4.js") .wait(function(){ script4Func(); });

  這樣寫代碼精煉了很多,推薦

  4,

$LAB.script(function(){ // `_is_IE`的值ie為true ,非ie為false
        if(_is_IE){ return"ie.js";    // 如果是ie則這個js會被加載
        }else{ return null;    //如果不是ie這個代碼就會被略過
 } }) .script("script1.js")   .wait();


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM