腳本安需導入(裝載)的三種模式的對比

2024-09-06 12:42:06

字體：大中小

來源：轉載

供稿：網友

何謂安需裝載？
    腳本程序一般都是下載后執行，當腳本庫非常龐大時，一次性下載起來非常費時，傳統的解決方式是，按功能模塊把腳本寫在不同的文件中，頁面上手動加入 script標簽裝載指定內容，但是這有一些缺點，類庫的使用者需要知道沒個腳本之間的關系，順序要求等等，而不可能要求每個類庫使用者都對其非常熟悉，出錯的可能性很大。于是很多框架開始支持導入指令，想使用什么一個導入函數就完了，不必一堆堆的script文件，不用小心翼翼的關注著他們的依賴關系。

安需裝載的困境：
      早期安需裝載（即時同步按需裝載）有一個致命的弱點，瀏覽器阻塞問題。當按需裝載某些類庫時，通常通過XMLHttpRequest同步裝載腳本文件實現，這種情況下，在資源下載完成之前，瀏覽器將停止響應用戶事件、停止頁面重畫操作。如果網速很慢，這段時間將非常讓人討厭，就像是死機似的。

      以前的解決辦法是，將常用類庫資源直接打包到框架文件中，而按需導入就成了一個宣傳的幌子，沒有太多實際的價值。

安需裝載可分如下三種模式：

l 即時同步按需裝載（阻塞，JSI、JSVM、dojo）。

最簡單的按需裝載實現，通過XMLHttpRequest同步裝載腳本文件實現。問題是，瀏覽器使用這種方式同步獲取資源時將導致瀏覽器阻塞：停止響應用戶事件、停止頁面重畫操作。所以，雖然編程最為簡單，但是用戶體驗最差。

2 異步按需裝載（無阻塞，JSI2.0+）。

異步導入，不必多做解釋，用戶體驗好，但是因為其異步特征，處理起來比較麻煩。

3 延遲同步按需裝載（無阻塞，JSI2.0+）。

JSI通過動態預裝載功能實現的一種同步獲取資源的方法，雖然也是同步，但沒有阻塞，可以算時兼顧易用性和用戶體驗的解決方按。缺點時有一定延遲，當前腳本標簽中不可用。



使用方法（JSI示例）
    以一個代碼語法著色程序為例：

類庫位置：org/xidea/example/code/code.js

頁面位置：example/xxx.html

即時同步按需裝載

import("org.xidea.example.code.Code");

var code1 = new Code();

code1.id = "libCode";

code1.decorate();

異步按需裝載

$import("org.xidea.example.code.Code",function(Code){

var code1 = new Code();

code1.id = "libCode";

上一篇：javascript中的幾個運算符

下一篇：List the Stored Procedures in a SQL Server database

學習交流

如何查找有故障的配件

如何查找有故障的配件...

熱門圖片

猜你喜歡的新聞

猜你喜歡的關注