1.head標(biāo)簽內(nèi)插入<script>標(biāo)簽
<script type="text/javaScript" src="test.js"></script>
這是最常見的方法，但是這個方法有個最大的問題弯洗，就是當(dāng)瀏覽器解析到<script>標(biāo)簽時能真，瀏覽器會停止解析其后的內(nèi)容赁严，而優(yōu)先下載腳本文件，并執(zhí)行其中的代碼粉铐，是個阻塞的過程疼约，這意味著，其后的test.css樣式文件和<body>標(biāo)簽都無法被加載蝙泼，由于<body>標(biāo)簽和樣式等資源無法被加載程剥，那么頁面自然就無法渲染了，因此常常頁面打開會出現(xiàn)頁面內(nèi)容空白或者樣式丟失問題汤踏，這都是在頭部引入了過多的js文件阻塞加載造成的织鲸，雖然高>版本的瀏覽器已經(jīng)可以對腳本并行加載，可是還有些瀏覽器腳本依舊是一個接一個加載的溪胶，因此優(yōu)化的話可以把js放在body標(biāo)簽最底部搂擦，這樣頁面可以先快速顯示出來，提高了體驗友好度哗脖。
2.創(chuàng)建動態(tài)腳本
var script=document.createElement('script');
script.type='text/javaScript';
script.src='test.js';
document.getElementsByTagName('head')[0].appendChild(script);
上述代碼動態(tài)創(chuàng)建了一個<script>標(biāo)簽瀑踢，并添加在<head>標(biāo)簽內(nèi)，無論在何時啟動下載才避，文件的下載和執(zhí)行過程不會阻塞頁面其他內(nèi)容的加載執(zhí)行橱夭。此方法比較常見，我們常用的一些第三方庫中桑逝，很多都采用這種方式棘劣。然而這種方式有個最大的問題就是無法保證多個腳本之間的加載順序，比如我寫了一個代碼肢娘，這個代碼>要依賴于jQuery呈础，但是如果我這個文件優(yōu)先于jQuery腳本先下載完并立即執(zhí)行舆驶，這時瀏覽器會報錯——‘jQuery未定義’之類的，因為此時jQuery庫還未下載完成而钞。
3.LABjs
可以幫我們完成腳本的并行加載和按順序執(zhí)行沙廉，這也是我們公司目前用的主要方式，想要看詳細(xì)的用法去官網(wǎng)看看臼节。
$LAB.script("script1.js")
.script("script2.js")
.script("script3.js")
.wait(function(){// 等待所有script加載完再執(zhí)行這個代碼塊
script1Func();
script2Func();
script3Func();
});
$LAB.script("script1.js")
.wait() // 空的wait()只是確保script1在其他代碼之前被執(zhí)行
.script("script2.js") // script2 和 script3 依賴于 script1
.script("script3.js")
.wait() // 但是script2 和 script3 并不互相依賴,可以并行下載
.script("script4.js") //script4 依賴于 script1, script2 及 script3
.wait(function(){script4Func();});
$LAB.script("script1.js") // script1, script2, and script3 之間沒有依賴關(guān)系,
.script("script2.js") // 所以可以任意順序執(zhí)行
.script("script3.js")
.wait(function(){ // 如果需要,這里當(dāng)然可以執(zhí)行javascript函數(shù)
alert("Scripts 1-3 are loaded!");
})
.script("script4.js") // 依賴于 script1, script2 及 script3
.wait(function(){script4Func();});
上面實例中撬陵，前面三個腳本并行加載，任意順序執(zhí)行网缝，如果有依賴并且腳本很多的話巨税，沒一個script函數(shù)后面接個wait就閑的代碼很臃腫麻煩，所以labjs庫提供了個參數(shù)可以確保下載完后順序執(zhí)行
$LAB.setOptions({AlwaysPreserveOrder:true})// 設(shè)置每個腳本之間等待
.script("script1.js")// script1, script2, script3, script4 互相依賴
.script("script2.js")// 并且并行下載后循序執(zhí)行
.script("script3.js")
.script("script4.js")
.wait(function(){
script4Func();
});
這樣寫代碼精煉了很多粉臊，推薦
$LAB.script(function(){
// `_is_IE`的值ie為true ,非ie為false
if(_is_IE){
return"ie.js"; // 如果是ie則這個js會被加載
}else{
return null; //如果不是ie這個代碼就會被略過
}
})
.script("script1.js")
.wait();
