腳本安需導(dǎo)入(裝載)的三種模式的對(duì)比
更新時(shí)間:2007年06月24日 00:00:00 作者:
何謂安需裝載?
腳本程序一般都是下載后執(zhí)行,當(dāng)腳本庫(kù)非常龐大時(shí),一次性下載起來(lái)非常費(fèi)時(shí),傳統(tǒng)的解決方式是,按功能模塊把腳本寫在不同的文件中,頁(yè)面上手動(dòng)加入 script標(biāo)簽裝載指定內(nèi)容,但是這有一些缺點(diǎn),類庫(kù)的使用者需要知道沒(méi)個(gè)腳本之間的關(guān)系,順序要求等等,而不可能要求每個(gè)類庫(kù)使用者都對(duì)其非常熟悉,出錯(cuò)的可能性很大。于是很多框架開(kāi)始支持導(dǎo)入指令,想使用什么一個(gè)導(dǎo)入函數(shù)就完了,不必一堆堆的script文件,不用小心翼翼的關(guān)注著他們的依賴關(guān)系。
安需裝載的困境:
早期安需裝載(即時(shí)同步按需裝載)有一個(gè)致命的弱點(diǎn),瀏覽器阻塞問(wèn)題。當(dāng)按需裝載某些類庫(kù)時(shí),通常通過(guò)XMLHttpRequest同步裝載腳本文件實(shí)現(xiàn),這種情況下,在資源下載完成之前,瀏覽器將停止響應(yīng)用戶事件、停止頁(yè)面重畫操作。如果網(wǎng)速很慢,這段時(shí)間將非常讓人討厭,就像是死機(jī)似的。
以前的解決辦法是,將常用類庫(kù)資源直接打包到框架文件中,而按需導(dǎo)入就成了一個(gè)宣傳的幌子,沒(méi)有太多實(shí)際的價(jià)值。
安需裝載可分如下三種模式:
l 即時(shí)同步按需裝載 (阻塞,JSI、JSVM、dojo)。
最簡(jiǎn)單的按需裝載實(shí)現(xiàn),通過(guò)XMLHttpRequest同步裝載腳本文件實(shí)現(xiàn)。問(wèn)題是,瀏覽器使用這種方式同步獲取資源時(shí)將導(dǎo)致瀏覽器阻塞:停止響應(yīng)用戶事件、停止頁(yè)面重畫操作。所以,雖然編程最為簡(jiǎn)單,但是用戶體驗(yàn)最差。
2 異步按需裝載(無(wú)阻塞,JSI2.0+)。
異步導(dǎo)入,不必多做解釋,用戶體驗(yàn)好,但是因?yàn)槠洚惒教卣鳎幚砥饋?lái)比較麻煩。
3 延遲同步按需裝載(無(wú)阻塞,JSI2.0+)。
JSI通過(guò)動(dòng)態(tài)預(yù)裝載功能實(shí)現(xiàn)的一種同步獲取資源的方法,雖然也是同步,但沒(méi)有阻塞,可以算時(shí)兼顧易用性和用戶體驗(yàn)的解決方按。缺點(diǎn)時(shí)有一定延遲,當(dāng)前腳本標(biāo)簽中不可用。
使用方法(JSI示例)
以一個(gè)代碼語(yǔ)法著色程序?yàn)槔?
類庫(kù)位置:org/xidea/example/code/code.js
頁(yè)面位置:example/xxx.html
即時(shí)同步按需裝載
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";
code1.decorate();
})
延遲同步按需裝載(無(wú)阻塞,JSI2.0+)。
<script>"../scripts/boot.js"></script>
<script>
$import("org.xidea.example.code.Code",true);
</script>
<script>
var code1 = new Code();
code1.id = "pageCode";
code1.decorate();
</script>
測(cè)試示例:
地址:
http://jsintegration.sourceforge.net/example/code.html
http://www.xidea.org/project/jsi/example/code.html
示例都是jsi的默認(rèn)示例,可以下載到本地運(yùn)行,下載后最好能放到一個(gè)能受到網(wǎng)速限制的服務(wù)器上,只有這樣才能看到阻塞的問(wèn)題。
參考:
JSI 導(dǎo)入函數(shù): function $import(path, callbackOrLazyLoad, target )
JSI2 預(yù)覽版下載:http://groups.google.com/group/jsier/files
腳本程序一般都是下載后執(zhí)行,當(dāng)腳本庫(kù)非常龐大時(shí),一次性下載起來(lái)非常費(fèi)時(shí),傳統(tǒng)的解決方式是,按功能模塊把腳本寫在不同的文件中,頁(yè)面上手動(dòng)加入 script標(biāo)簽裝載指定內(nèi)容,但是這有一些缺點(diǎn),類庫(kù)的使用者需要知道沒(méi)個(gè)腳本之間的關(guān)系,順序要求等等,而不可能要求每個(gè)類庫(kù)使用者都對(duì)其非常熟悉,出錯(cuò)的可能性很大。于是很多框架開(kāi)始支持導(dǎo)入指令,想使用什么一個(gè)導(dǎo)入函數(shù)就完了,不必一堆堆的script文件,不用小心翼翼的關(guān)注著他們的依賴關(guān)系。
安需裝載的困境:
早期安需裝載(即時(shí)同步按需裝載)有一個(gè)致命的弱點(diǎn),瀏覽器阻塞問(wèn)題。當(dāng)按需裝載某些類庫(kù)時(shí),通常通過(guò)XMLHttpRequest同步裝載腳本文件實(shí)現(xiàn),這種情況下,在資源下載完成之前,瀏覽器將停止響應(yīng)用戶事件、停止頁(yè)面重畫操作。如果網(wǎng)速很慢,這段時(shí)間將非常讓人討厭,就像是死機(jī)似的。
以前的解決辦法是,將常用類庫(kù)資源直接打包到框架文件中,而按需導(dǎo)入就成了一個(gè)宣傳的幌子,沒(méi)有太多實(shí)際的價(jià)值。
安需裝載可分如下三種模式:
l 即時(shí)同步按需裝載 (阻塞,JSI、JSVM、dojo)。
最簡(jiǎn)單的按需裝載實(shí)現(xiàn),通過(guò)XMLHttpRequest同步裝載腳本文件實(shí)現(xiàn)。問(wèn)題是,瀏覽器使用這種方式同步獲取資源時(shí)將導(dǎo)致瀏覽器阻塞:停止響應(yīng)用戶事件、停止頁(yè)面重畫操作。所以,雖然編程最為簡(jiǎn)單,但是用戶體驗(yàn)最差。
2 異步按需裝載(無(wú)阻塞,JSI2.0+)。
異步導(dǎo)入,不必多做解釋,用戶體驗(yàn)好,但是因?yàn)槠洚惒教卣鳎幚砥饋?lái)比較麻煩。
3 延遲同步按需裝載(無(wú)阻塞,JSI2.0+)。
JSI通過(guò)動(dòng)態(tài)預(yù)裝載功能實(shí)現(xiàn)的一種同步獲取資源的方法,雖然也是同步,但沒(méi)有阻塞,可以算時(shí)兼顧易用性和用戶體驗(yàn)的解決方按。缺點(diǎn)時(shí)有一定延遲,當(dāng)前腳本標(biāo)簽中不可用。
使用方法(JSI示例)
以一個(gè)代碼語(yǔ)法著色程序?yàn)槔?
類庫(kù)位置:org/xidea/example/code/code.js
頁(yè)面位置:example/xxx.html
即時(shí)同步按需裝載
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";
code1.decorate();
})
延遲同步按需裝載(無(wú)阻塞,JSI2.0+)。
<script>"../scripts/boot.js"></script>
<script>
$import("org.xidea.example.code.Code",true);
</script>
<script>
var code1 = new Code();
code1.id = "pageCode";
code1.decorate();
</script>
測(cè)試示例:
地址:
http://jsintegration.sourceforge.net/example/code.html
http://www.xidea.org/project/jsi/example/code.html
示例都是jsi的默認(rèn)示例,可以下載到本地運(yùn)行,下載后最好能放到一個(gè)能受到網(wǎng)速限制的服務(wù)器上,只有這樣才能看到阻塞的問(wèn)題。
參考:
JSI 導(dǎo)入函數(shù): function $import(path, callbackOrLazyLoad, target )
JSI2 預(yù)覽版下載:http://groups.google.com/group/jsier/files
相關(guān)文章
JavaScript實(shí)現(xiàn)語(yǔ)音排隊(duì)叫號(hào)系統(tǒng)
語(yǔ)音排隊(duì)叫號(hào)系統(tǒng)廣泛用于銀行,餐飲,醫(yī)院等場(chǎng)景。本文主要介紹了通過(guò)JavaScript實(shí)現(xiàn)的語(yǔ)音排隊(duì)叫號(hào)系統(tǒng),有掃碼排隊(duì),語(yǔ)音叫號(hào)等功能。需要的可以參考一下2021-12-12
如何使Chrome控制臺(tái)支持多行js模式——意外發(fā)現(xiàn)
一直以來(lái),Chrome控制臺(tái)都缺少象IE調(diào)試臺(tái)那樣的多行執(zhí)行模式,今天意外發(fā)現(xiàn)Chrome其實(shí)也支持多行模式2013-06-06
用js閉包的方法實(shí)現(xiàn)多點(diǎn)標(biāo)注冒泡示例
這篇文章主要介紹了用js閉包的方法實(shí)現(xiàn)多點(diǎn)標(biāo)注冒泡,需要的朋友可以參考下2014-05-05
setTimeout()與setInterval()方法區(qū)別介紹
計(jì)時(shí)器setTimeout()和setInterval()兩個(gè)都是js的計(jì)時(shí)功能的函數(shù)兩個(gè)有些區(qū)別,下面為大家簡(jiǎn)單介紹下,希望對(duì)大家有所幫助2013-12-12
使用Bootstrap Tabs選項(xiàng)卡Ajax加載數(shù)據(jù)實(shí)現(xiàn)
這篇文章主要介紹了使用Bootstrap Tabs選項(xiàng)卡Ajax加載數(shù)據(jù)實(shí)現(xiàn),以及遇到的問(wèn)題,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-12-12
使用JavaScript開(kāi)發(fā)IE瀏覽器本地插件實(shí)例
這篇文章主要介紹了使用JavaScript開(kāi)發(fā)IE瀏覽器本地插件實(shí)例,本文講解使用JS+注冊(cè)表的方式開(kāi)發(fā)一個(gè)IE瀏覽器本地插件,需要的朋友可以參考下2015-02-02
JavaScript?評(píng)測(cè)代碼運(yùn)行速度的案例代碼
在?JavaScript?中,可以使用?performance.now()?API?來(lái)評(píng)測(cè)代碼的運(yùn)行速度。該?API?返回當(dāng)前頁(yè)面的高精度時(shí)間戳,您可以在代碼執(zhí)行前后調(diào)用它來(lái)計(jì)算代碼執(zhí)行所需的時(shí)間,這篇文章主要介紹了JavaScript?評(píng)測(cè)代碼運(yùn)行速度,需要的朋友可以參考下2023-02-02

