首頁 > 開發者 > JavaScript
標籤：
前言本章主要講述如何載入指令碼使得使用者能有良好的使用者體驗，而核心內容就是JavaScript的非同步載入。之前寫過一篇不得不說的JavaScript非同步載入，相似的內容就不多加描述，講些不同的東西，主要講下JavaScript檔案載入器labjs的常用方法。
流水賬指令碼位置：推薦將所有的<script>標籤儘可能放到<body>標籤的底部，也就是</body>之前，這樣就能在執行js代碼之前將使用者介面呈現出來，改善使用者體驗。
組織指令碼：由於每個<script>標籤初始下載時都會阻塞頁面渲染，所以減少頁麵包含的<script>標籤數量有助於改善這一情況。通常一個大型網站或者網路應用需要依賴數個JavaScript檔案，你可以把多個檔案合并成一個，這樣只需要一個<script>標籤，就可以減少效能消耗，實質是減少了http請求。
無阻塞的指令碼：defer、動態指令碼元素、XMLHttpRequest指令碼注入（和動態指令碼元素技術相比的優點是你可以下載JavaScript代碼但不立即執行，但是因為同源策略所以有很大的局限性）、LazyLoad類庫。
LABjs接下來就是labjs的時間了，labjs是一個js檔案載入器，而requirejs和seajs則是模組載入器，模組載入器一般可以降級為檔案載入器使用。labjs通過優雅的文法（script和wait 鏈式）實現了這兩大特性，核心是效能最佳化，可以管理檔案依賴，並且“非同步”執行。下面通過具體的例子來簡單講講這兩大api的用法。
如果你只需實現動態指令碼元素技術那樣的多個指令碼並發“非同步”執行，那實在太簡單不過了：
$LAB
.script("script1.js") .script("script2.js");
當然你也可以用數組或者對象的方式傳參，詳細可以參考文檔，我也會在下一篇中詳細介紹labjs的常用api。
如果說載入完兩個檔案（或者多個），你需要一個回調，這時候就要用到wait了：
$LAB .script("script1.js") .script("script2.js") .script("script3.js") .wait(function() { // 等待所有script載入完再執行這個代碼塊 // ... });
如何管理檔案依賴？也很簡單：
$LAB .script("script1.js") // script1, script2, and script3 相互不依賴, 可以按照任意的順序執行 .script("script2.js") .script("script3.js") .wait(function(){ console.log("Scripts 1-3 are loaded!"); }) .script("script4.js") // 必須等待script1.js,script2.js,script3.js執行完畢之後才能執行 .wait(function(){initScript4Func();});
script4依賴script1、script2和script3，通過以上代碼依賴檔案能夠非同步並存執行，而等它們三個檔案執行完後執行script4，效率大大提升。需要特別注意的是，script中只能包含.js結尾的檔案（或者對象、數組），而不能是一個匿名的js函數，如果是則會立即執行。
高效能JavaScript 載入和執行
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
