標籤：set options 內容 最大的 document 寫代碼 else src 關係
前端最佳化過程中常提到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();
js順序載入與並行載入
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
