异步加载:ControlJS让脚本加载更快的一个模块

ControlJS: how it works
现在脚本不会阻塞页面了，因为TYPE属性已经改为浏览器无法识别的值了。这也就让ControlJS可以用一种高性能的方法更好的控制脚本加载。让我们大概看看ControlJS是如何运作的呢？当然，你也可以查看control.js 的代码来更详细的了解。

我们都希望能够尽快的开始下载脚本。因为我们使用IMAGE或者OBJECT来下载脚本，所以它们不会在下载阶段阻塞页面。而且他们并不是作为SCRIPT下载的，所以它们也不会执行。ControlJS首先找出所有SCRIPT的，并且type为”text/cjs”的标签。如果脚本有一个DATA-CJSSRC，那么IMAGE(IE和Opera浏览器）或者OBJECT(其他浏览器）就会根据它们的URL动态的创建出来。（你可以查看Stoyan’s post去了解更详细的内容）。

一般来说，ControlJS会在window load的时间之后进入执行阶段（当然也可以立刻执行代码或者某个DOM元素加载完毕了）。ControlJS会第二次遍历所有的脚本，确保它们都正确的出现在页面中。如果这个脚本是一个内联脚本，那么它的代码会被执行。如果这个脚本是一个外链脚本，由IMAGE或者OBJECT动态下载下来的，那么它会作为一个SCRIPT标签插入到页面中，那么它的代码也会随之解析并且执行。如果IMAGE或者OBJECT并没有下载结束，那么会在一个短暂的时间间隔之后(a short timeout)，重新进入刚才的遍历流程。

后续的文章中我还会讨论关于document.write的功能，以及跳过执行阶段。这篇中，我们首先来看一个简单的异步加载的例子。

Async example
为了能更好展示异步加载的情况，我创建了一个文件，文件顶部包含三个脚本：

•main.js – 耗费4秒下载
•一段内联脚本会使用main.js的一个变量
•page.js – 耗费2秒下载，使用内联脚本的一个变量
我让page.js的下载时间比main.js的下载时间短，是为了确认这些脚本可以以正确的顺序执行(尽管page.js下载更快）。我同事也包含了内联的脚本，因为这也是很多页面的实际情况（例如Google Analytics)，但是很多脚本加载器并不支持内联脚本的执行顺序。

Async withOUT ControlJS是一个基本范例。它使用了最普通的方式加载脚本。可以看一下如下图所示的IE8下的HTTP瀑布图(使用HttpWatch).IE8比IE6和IE7要好 – 能够使main.js和page.js并行加载。但是所有的IE都会因为脚本加载而阻塞图片的下载。所以images1-4都延迟了。在所有浏览器中，页面渲染都会被阻塞。在图示中也可以看出，main.js阻塞渲染长达4秒钟（绿色的竖

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!