js順序加載與並行加載

時間 2019-12-13

原文原文鏈接

　　前端優化過程當中常提到js的加載方式，下面說下幾種經常使用的加載方式：javascript

　　1：head標籤內插入<script>標籤css

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

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

　　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庫還未下載完成。app

　　3：LABjs前端優化

　　能夠幫咱們完成腳本的並行加載和按順序執行，這也是咱們公司目前用的主要方式，想要看詳細的用法去官網看看。函數

　　常見用法：優化

　　1，spa

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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。