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

来源：绵阳剑锋网络日期：2014-04-18 23:45 | 分类：IT技术

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:"/js/a.js"},
   {b:"/js/b.js"},
   {c:"/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>