head.js 小型网站并行动态加载JS利器 (js文件加载器)

head.js 小型网站并行动态加载JS利器 (js文件加载器)

head.js   ——   The only script in your HEAD   让head标签中仅有一个script标签

快速加载JS和css文件

通常情况下JS两大特性 1. 载入后马上执行  2. 执行时会阻塞页面后续的内容 3. 串行加载 按顺序加载，所以每个JS有加载时间，所以JS越多加载的时间越长，如果采用并行加载也叫异步加载并行执行（就是所有JS文件同时加载）的话，JS加载速度能提高差不多一倍，headjs就是并行加载的方式来提高网站JS的加载速度，并且headjs提供了缓存机制，加载的文件可以被缓存，加载但不执行，仅当在我们想要执行的时候执行。
headjs的用法：

1.  head.js('a.js')  异步加载js

2.  head.js("a.js",function(){});  异步加载a.js，只有a.js成功加载之后才执行函数

3.  head.js('a.js','b.js','c.js'...'n.js')  并行下载里面的js，并按顺序执行

4.  head.js("a.js","b.js","c.js",function(){ }) a.js、b.js、 c.sj 并行下载里面的js，并按顺序执行  全部加载成功后执行后面的回调函数

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加载完成之后才会执行

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

9.  head.onlyready('a.js')   //仅加载 只负责加载JS但不执行

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

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

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

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

给脚本起别名

head.js(
    {a:"http://www.it2168.com/js/a.js"},
    {b:"http://www.it2168.com/js/b.js"},
    {c:"http://www.it2168.com/js/c.js"},
    "d.js" //别名可选
)

head.ready('a',function(){
        alert('a.js加载完成')；
}) 页面中的d.js加载完成后才加载a.js 并执行回调函数

可以先将页面全部输出再用headjs加载需要的脚本，应用window.onload事件，防止脚本加载不成功页面一直打转！
<script type="text/javascript" src="head.js"></script>

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