N的试验田

暂缓解析javascript

作者：N 发布时间：June 20, 2011 分类：试验田

影响页面加载速度有个说法叫做暂缓解析javascript，具体意思就是先让页面里的html代码和css代码先行解析，然后再解析javascript代码，从而提高页面打开速度，这也是为什么Yslow会有一条是要求javascript放在页面底部的原因。

实践证明这样做确实可以提高页面加载速度，目的已经有了，那么如何去实现呢？

目前大多数的网站都使用了jquery库，所以本文以默认使用jquery库为前提来探讨暂缓解析javascript的问题。

因为默认使用了jquery库，这里有一个问题，如果使用jquery特有属性$("#id")之类代码是放在引入jquery库之后，那么此段jqury代码将不被执行，所以引入jquery库的顺序不能有误，这就是问题的所在：假设我把jquery库放在底部引入，那么页面中间出现了一段后端开发添加的jquery类型的判断代码，那么这段代码将不会被解释执行，于是你不得不把jquery库代码放到了页头，把剩下的外部功能代码合并成一个js文件页尾引入，这也是主站laozhuhome.com采用的做法。

这种做法个人认为只有页头的jquery最初被解析，然后页面加载完毕页尾的合并js代码最后解析，不知道这种猜测是否正确，还有待我做实验验证。

目前大多数网站还是把js放在了页头，这样做很安全，不会出现某段js无法正确执行的情况，于是有人会问有没有一种方法既可以把js放到页头又能减少网页显示时出现堵塞的概率，方法我找到一种，ControlJS。

先看看这个ControlJS的介绍吧：

ControlJS is a JavaScript module for making scripts load faster.

Features:

• downloads scripts asynchronously
• handles both inline scripts and external scripts
• delays script execution until after the page has rendered
• allows for scripts to be downloaded and not executed
• integrates with simple changes to HTML . no code changes
• solves some document.write async use cases
• control.js itself is loaded asynchronously

翻译过来就是

• 异步下载脚本
• 能同时处理外链和内联脚本
• 让脚本在页面加载完成之后才执行
• 支持脚本单纯下载但不执行
• 使用原生HTML
• 解决了部分document.write的问题
• control.js自身加载是异步的 

先异步下载control.js，然后处理内联和外联js，只下载但是不执行，页面加载完毕再执行。

这是我找到的比较好的暂缓解析javascript方法，不过有利就有弊，如果你的项目js依赖关系太强，那么不建议使用此方法。

标签: javascript