让页面跑的更快些：ControlJS-脚本的无阻塞下载

 

官方网站：http://stevesouders.com/controljs/

ControlJS能做什么：

• 异步加载脚本
• 脚本延迟执行

先看两个示例页面：

没有使用ControlJS的页面 | 使用了ControlJS的页面

怎样使用ControlJS：

要把ControlJS应用到您当前的页面中，只需修改三个部分的内容

#1：引入control.js文件

control.js本身会以异步的方式加载：

1 2 3 4 5 6

<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标签的相关属性

页面中正常引入外部脚本是下面这样的格式：

1	<script type="text/javascript" src="main.js"></script>

把script标签的TYPE属性改成“text/cjs”，SRC属性改成data-cjssrc，像下面这样：

1	<script type="text/cjs" data-cjssrc="main.js"></script>

#3：修改内嵌脚本的script标签相关属性：

1 2 3

<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文件放在页面底部完全能达到相同的效果，这里主要介绍的是他的一种实现方法。