5種JavaScript腳本加載的方式
javaScript文件(下面簡(jiǎn)稱腳本文件)需要被HTML文件引用才能在瀏覽器中運(yùn)行。在HTML文件中可以通過(guò)不同的方式來(lái)引用腳本文件,我們需要關(guān)注的是,這些方式的具體實(shí)現(xiàn)和這些方式可能會(huì)帶來(lái)的性能問(wèn)題。
當(dāng)瀏覽器遇到(內(nèi)嵌)<script>標(biāo)簽時(shí),當(dāng)前瀏覽器無(wú)從獲知javaScript是否會(huì)修改頁(yè)面內(nèi)容。因此,這時(shí)瀏覽器會(huì)停止處理頁(yè)面,先執(zhí)行javaScript代碼,然后再繼續(xù)解析和渲染頁(yè)面。同樣的情況也發(fā)生在使用 src 屬性加在javaScript的過(guò)程中(即外鏈 javaScript),瀏覽器必須先花時(shí)間下載外鏈文件中的代碼,然后解析并執(zhí)行它。在這個(gè)過(guò)程中,頁(yè)面渲染和用戶交互完全被阻塞了。
也就是說(shuō):每當(dāng)瀏覽器解析到<script>標(biāo)簽(無(wú)論內(nèi)嵌還是外鏈)時(shí),瀏覽器會(huì)(一根筋地)優(yōu)先下載、解析并執(zhí)行該標(biāo)簽中的javaScript代碼,而阻塞了其后所有頁(yè)面內(nèi)容的下載和渲染。
方式一:慣例的做法
最傳統(tǒng)的方式是在head標(biāo)簽內(nèi)插入<script>標(biāo)簽。
然而這種常規(guī)的做法卻隱藏著嚴(yán)重的性能問(wèn)題。根據(jù)上述對(duì)<script>標(biāo)簽特性的描述,我們知道,在該示例中,當(dāng)瀏覽器解析到<script>標(biāo)簽時(shí),瀏覽器會(huì)停止解析其后的內(nèi)容,而優(yōu)先下載腳本文件,并執(zhí)行其中的代碼,這意味著,其后的test.css樣式文件和<body>標(biāo)簽都無(wú)法被加載,由于<body>標(biāo)簽無(wú)法被加載,那么頁(yè)面自然就無(wú)法渲染了。因此在該javaScript代碼完全執(zhí)行完之前,頁(yè)面都是一片空白。
<script type="text/javaScript" src="example.js"></script>
方式二:經(jīng)典的做法
既然<script>標(biāo)簽會(huì)阻塞其后內(nèi)容的加載,那么將<script>標(biāo)簽放到所有頁(yè)面內(nèi)容之后不就可以避免這種糟糕的狀況了嗎? 將所有的<script>標(biāo)簽盡可能地放到<body>標(biāo)簽底部,以盡量避免對(duì)頁(yè)面其余部分下載的影響。
在IE8+瀏覽器上已經(jīng)實(shí)現(xiàn)了腳本并行下載,但在某些瀏覽器中(即使腳本文件放到了<body>標(biāo)簽底部),頁(yè)面中腳本仍是一個(gè)接著一個(gè)加載的。所以我們需要下一個(gè)方法,即:動(dòng)態(tài)加載腳本。
方式三:動(dòng)態(tài)腳本
通過(guò)文檔對(duì)象模型(DOM),我們可以幾乎可以頁(yè)面任意地方創(chuàng)建。
<script type='text/javascript'>
var script = document.createElement('script');
script.type = 'text/javaScript';
script.src = 'file1.js';
document.getElementsByTagName('head')[0].appendChild(script);
</script>
上述代碼動(dòng)態(tài)創(chuàng)建了一個(gè)外鏈file1的<script>標(biāo)簽,并將其添加到<head>標(biāo)簽內(nèi)。這種技術(shù)的重點(diǎn)在于:
無(wú)論在何時(shí)啟動(dòng)下載,文件的下載和執(zhí)行過(guò)程不會(huì)阻塞頁(yè)面其他進(jìn)程(包括腳本加載)。
然而這種方法也是有缺陷的。這種方法加載的腳本會(huì)在下載完成后立即執(zhí)行,那么意味著多個(gè)腳本之間的運(yùn)行順序是無(wú)法保證的(除了Firefox和Opera)。當(dāng)某個(gè)腳本對(duì)另一個(gè)腳本有依賴關(guān)系時(shí),就很可能發(fā)生錯(cuò)誤了。比如,寫一個(gè)jQuery代碼,需要引入jQuery庫(kù),然而你寫的jQuery代碼文件很可能會(huì)先完成下載并立即執(zhí)行,這時(shí)瀏覽器會(huì)報(bào)錯(cuò)——‘jQuery未定義'之類的,因?yàn)榇藭r(shí)jQuery庫(kù)還未下載完成。于是做出以下改進(jìn):
<script type='text/javascript'>
function loadScript(url, callback) {
var script = document.createElement('script');
script.type = "text/javaScript";
// IE和opera支持onreadystatechange
// safari、chrome、opera支持onload
if (script.readyState) {//IE
script.onreadystatechange = function() {
if (script.readyState == "loaded"
|| script.readyState == "complete") {
script.onreadystatechange = null;
callback();
}
};
} else {//其他瀏覽器
script.onload = function() {
callback();
};
}
script.src = url;
document.getElementsByTagName('head')[0].appendChild(script);
}
</script>
上述代碼改進(jìn)的地方就是增加了一個(gè)回調(diào)函數(shù),該函數(shù)會(huì)在相應(yīng)腳本文件加載完成后被調(diào)用。這樣便可以實(shí)現(xiàn)順序加載了,寫法如下(假設(shè)file2依賴file1,file1和file3相互獨(dú)立):
loadScript(‘file1.js',function(){ loadScript(‘file2.js',function(){}); }); loadScript(‘file3.js',function(){});
file2會(huì)在file1加載完后才開(kāi)始加載,保證了在file2執(zhí)行前file1已經(jīng)準(zhǔn)備妥當(dāng)。而file1和file3是并行下載的,互不影響。 雖然loadScript函數(shù)已經(jīng)足夠好,但還是有些不盡人意的地方——通過(guò)分析這段代碼,我們知道,loadScript函數(shù)中的順序加載是以腳本的阻塞加載來(lái)實(shí)現(xiàn)的(正如上述紅字部分指出的那樣)。而我們真正想實(shí)現(xiàn)的是——腳本同步下載并按相應(yīng)順序執(zhí)行,即并行加載并順序執(zhí)行。
方式四:LABjs
LABjs庫(kù)能幫我們真正地實(shí)現(xiàn)“并行加載與順序執(zhí)行”,推薦寫法如下:
<script src="LAB.js"></script>
<script type="text/javaScript">
$LAB
.script("script1.js").wait()
.script("script2-a.js")
.script("script2-b.js")
.wait(function(){
initScript1();
initScript2();
})
.script("script3.js")
.wait(function(){
initScript3();
});
</script>
方式五:requireJS
<script src="require.js"></script>
<script type="text/javaScript">
require([
"script1.js",
"script2-a.js",
"script2-b.js",
"script3.js"
],
function(){
initScript1();
initScript2();
initScript3();
}
);
</script>
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
瀏覽器調(diào)試動(dòng)態(tài)js腳本的方法(圖解)
這篇文章主要介紹了瀏覽器調(diào)試動(dòng)態(tài)js腳本的方法,文中給大家?guī)?lái)兩種調(diào)試方法,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2018-01-01
學(xué)習(xí)使用Bootstrap頁(yè)面排版樣式
這篇文章主要教大家學(xué)習(xí)使用Bootstrap頁(yè)面排版樣式,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-05-05
javascript內(nèi)置對(duì)象Math案例總結(jié)分析
今天總結(jié)一下javascript 內(nèi)置對(duì)象Math中的函數(shù)用法,順帶寫一下常見(jiàn)的案例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步2022-03-03
驗(yàn)證控件與Button的OnClientClick事件詳細(xì)解析
以下就是被我已知忽略的問(wèn)題和解決方案,當(dāng)我發(fā)覺(jué)這個(gè)問(wèn)題的時(shí)候,冒出了一身冷汗,幸虧做了嚴(yán)格的服務(wù)器端驗(yàn)證,不然可就慘了2013-12-12
基于MooTools的很有創(chuàng)意的滾動(dòng)條時(shí)鐘動(dòng)畫
一款很有創(chuàng)意的時(shí)鐘js動(dòng)畫.是利用系統(tǒng)滾動(dòng)條來(lái)構(gòu)成一個(gè) 時(shí):分:秒 的盤. 再利用滾動(dòng)條的長(zhǎng)度變化做過(guò)渡動(dòng)畫.2010-11-11
JavaScript 實(shí)現(xiàn)日期時(shí)間轉(zhuǎn)時(shí)間戳
這篇文章主要介紹了JavaScript 實(shí)現(xiàn)日期時(shí)間轉(zhuǎn)時(shí)間戳,文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹,具有一定的參考價(jià)值,需要的小伙伴可以參考一下2022-08-08
利用JavaScript實(shí)現(xiàn)防抖節(jié)流函數(shù)的示例代碼
在開(kāi)發(fā)中我們經(jīng)常會(huì)遇到一些高頻操作,比如:鼠標(biāo)移動(dòng),滑動(dòng)窗口,鍵盤輸入等等,節(jié)流和防抖就是對(duì)此類事件進(jìn)行優(yōu)化,降低觸發(fā)的頻率,以達(dá)到提高性能的目的。本文就教大家如何實(shí)現(xiàn)一個(gè)讓面試官拍大腿的防抖節(jié)流函數(shù),需要的可以參考一下2022-08-08
javascript獲取select值的方法完整實(shí)例
這篇文章主要介紹了javascript獲取select值的方法,結(jié)合完整實(shí)例形式分析了javascript動(dòng)態(tài)遍歷與操作頁(yè)面元素相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2019-06-06

