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

在脚本执行阶段，页面渲染和新资源下载会被阻塞。在如今网页中的脚本越来越多，在脚本执行阶段的阻塞问题就更为严重，尤其是在移动设备上。事实上，Gmail移动设备组考虑到脚本执行带来的问题，它们完善了new async technique that downloads JavaScript wrapped in comments。这项技术可以使得脚本执行和下载分离。脚本会下载到客户端（在浏览器的缓存中），但是因为它是脚本注释，所以在执行阶段不会阻塞（因为不会执行）。当用户使用了相关功能的时候，需要某些脚本时，会将注释符号删除，然后eval执行代码。

Stoyan Stefanov, 一名优秀的性能优化前驱者，最近发布了一篇博文preloading JavaScript without execution.他用IMAGE或者OBJECT(这取决于浏览器）来下载脚本。假设这些脚本可以缓存在客户端中，随后可以使用SCRIPT标签插入脚本。这个也是在ControlJS中使用的技术。

ControlJS: how to use it
使用ControlJS涉及到三个步骤的修改

修改点#1：添加control.js

我想关于脚本加载模块的使用，最讽刺的地方就在于，加载这些异步脚本加载种子文件是会阻塞页面的。所以从一开始我就必须确认ControlJS是要能被异步加载的。

var cjsscript = document.createElement('script');
cjsscript.src = "control.js";
var cjssib = document.getElementsByTagName('script')[0];
cjssib.parentNode.insertBefore(cjsscript, cjssib);修改点#2：修改外链的脚本
下一步就是将所有外链脚本的标签改为ControlJS的形式。原本的脚本引用如下

<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 修改内联的脚本
大多数的页面都会有内联的脚本。这些脚本有一些依赖性：内联脚本中的变量一般依赖于外链的脚本，反之亦然。很重要的一点是：内敛脚本和外链脚本的执行顺序是需要保证的。因此，内联脚本必须改变TYPE属性的值

<script type="text/javascript">
var name = getName();
<script>修改“text/javascript”为”text/cjs”,如下：

<script type="text/cjs">
var name = getName();
<script>这样就ok了

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