head.js 小型網(wǎng)站并行動態(tài)加載JS利器 (js文件加載器)

head.js 小型網(wǎng)站并行動態(tài)加載JS利器 (js文件加載器)

head.js   ——   The only script in your HEAD   讓head標(biāo)簽中僅有一個script標(biāo)簽

快速加載JS和css文件

通常情況下JS兩大特性 1. 載入后馬上執(zhí)行  2. 執(zhí)行時會阻塞頁面后續(xù)的內(nèi)容 3. 串行加載 按順序加載，所以每個JS有加載時間，所以JS越多加載的時間越長，如果采用并行加載也叫異步加載并行執(zhí)行（就是所有JS文件同時加載）的話，JS加載速度能提高差不多一倍，headjs就是并行加載的方式來提高網(wǎng)站JS的加載速度，并且headjs提供了緩存機制，加載的文件可以被緩存，加載但不執(zhí)行，僅當(dāng)在我們想要執(zhí)行的時候執(zhí)行。
headjs的用法：

1.  head.js('a.js')  異步加載js

2.  head.js("a.js",function(){});  異步加載a.js，只有a.js成功加載之后才執(zhí)行函數(shù)

3.  head.js('a.js','b.js','c.js'...'n.js')  并行下載里面的js，并按順序執(zhí)行

4.  head.js("a.js","b.js","c.js",function(){ }) a.js、b.js、 c.sj 并行下載里面的js，并按順序執(zhí)行  全部加載成功后執(zhí)行后面的回調(diào)函數(shù)

5.  head.js(a.js); head.js(b.js); head.js(c.js)  類似2

6.  head.js(a.js).js(b.js).js(c.js)   類似2

7.  head.read(function(){})  簡潔寫法  head(function(){}); 頁面所有head.js加載完成之后才會執(zhí)行

8.  head.read('a.js',function(){})  在頁面所有head.js加載完成之后才加載a.js

9.  head.onlyready('a.js')   //僅加載 只負責(zé)加載JS但不執(zhí)行

10.  head.ready('c.js',function(){
     a.execut(); //在需要執(zhí)行的地方執(zhí)行execut方法。
})  

11.  head.load('jQuery.js',function(){})

12.  head.load('a.css')

head.test  head.feature  head.boxshadow   ....  

給腳本起別名

head.js(
    {a:"http://www.mediarhema.com/js/a.js"},
    {b:"http://www.mediarhema.com/js/b.js"},
    {c:"http://www.mediarhema.com/js/c.js"},
    "d.js" //別名可選
)

head.ready('a',function(){
        alert('a.js加載完成')；
}) 頁面中的d.js加載完成后才加載a.js 并執(zhí)行回調(diào)函數(shù)

可以先將頁面全部輸出再用headjs加載需要的腳本，應(yīng)用window.onload事件，防止腳本加載不成功頁面一直打轉(zhuǎn)！
<script type="text/javascript" src="head.js"></script>

<script type="text/javascript">
window.onload=function(){
    head.js('jquery.js'),function(){}
}
</script>