歡迎來到Linux教程網
Linux教程網
Linux教程網
Linux教程網
Linux教程網 >> Linux編程 >> Linux編程 >> 高性能JavaScript 加載和執行

高性能JavaScript 加載和執行

日期:2017/3/1 9:26:19   编辑:Linux編程

前言

  本章主要講述如何加載腳本使得用戶能有良好的用戶體驗,而核心內容就是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的時間了,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函數,如果是則會立即執行。

Copyright © Linux教程網 All Rights Reserved