转自http://www.cnblogs.com/demix/archive/2010/12/17/1909288.html。
官方网站:http://stevesouders.com/controljs/
ControlJS能做什么:
- 异步加载脚本
- 脚本延迟执行
先看两个示例页面:
没有使用ControlJS的页面|使用了ControlJS的页面
怎样使用ControlJS:
要把ControlJS应用到您当前的页面中,只需修改三个部分的内容
#1:引入control.js文件
control.js本身会以异步的方式加载:
<script type="text/javascript">
var cjsscript = document.createElement('script');
cjsscript.src = "control.js";
var cjssib = document.getElementsByTagName('script')[0];
cjssib.parentNode.insertBefore(cjsscript, cjssib);
</script>
#2:修改页面中需要异步加载脚本的script标签的相关属性
页面中正常引入外部脚本是下面这样的格式:
<script type="text/javascript" src="main.js"></script>
把script标签的TYPE属性改成“text/cjs”,SRC属性改成data-cjssrc,像下面这样:
<script type="text/cjs" data-cjssrc="main.js"></script>
#3:修改内嵌脚本的script标签相关属性:
<script type="text/cjs">
var name = getName();
</script>
ControlJS是怎样工作的?
ControlJS是通过什么方式让页面中的脚本可以无阻塞的下载执行?在上面的使用方法中你可能已经知道了他的运行方式。它是通过修改页面中script标签的相关属性,让浏览器识别不了这是脚本文件,然后在页面中查找type属性为“text/cjs” 的script标签,让这些脚本文件以img(在IE和Opera中)或object(除IE和Opera的其他浏览器中)的方式下载,从而实现了无阻塞,而且,因为这些脚本文件不是通过script标签下载的,它们在下载之后不会立即执行。
默认情况下,ControlJS是在window对象的onload事件里执行的(也可让它在脚本或某dom对象装载完就执行)。页面里的脚本会按它出现的先后顺序执行。外部引入的脚本,一旦它伪装成的图片对象或OBJECT对象下载完成,便会以SCRIPT标签的形式嵌入到页面中去,这样这些脚本就能被解析执行。
注:其实大多数情况下,把js文件放在页面底部完全能达到相同的效果,这里主要介绍的是他的一种实现方法。
看看:http://ued.taobao.com/blog/2011/03/18/controljs-alimama/