本章主要講述如何加載腳本使得用戶能有良好的用戶體驗,而核心內容就是JavaScript的異步加載。之前寫過一篇不得不說的JavaScript異步加載,相似的內容就不多加描述,講些不同的東西,主要講下JavaScript文件加載器labjs的常用方法。
高性能JavaScript編程(高清PDF原版)及中英文對照版 PDF http://www.linuxidc.com/Linux/2015-08/121418.htm
腳本位置:推薦將所有的<script>標簽盡可能放到<body>標簽的底部,也就是</body>之前,這樣就能在執行js代碼之前將用戶界面呈現出來,改善用戶體驗。
組織腳本:由於每個<script>標簽初始下載時都會阻塞頁面渲染,所以減少頁面包含的<script>標簽數量有助於改善這一情況。通常一個大型網站或者網絡應用需要依賴數個JavaScript文件,你可以把多個文件合並成一個,這樣只需要一個<script>標簽,就可以減少性能消耗,實質是減少了http請求。
無阻塞的腳本:defer、動態腳本元素、XMLHttpRequest腳本注入(和動態腳本元素技術相比的優點是你可以下載JavaScript代碼但不立即執行,但是因為同源策略所以有很大的局限性)、LazyLoad類庫。
接下來就是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函數,如果是則會立即執行。