加载 Javascript 最佳实践

相信很多与页面打过交道的同学都对 Yahoo 的 Best Practices for Speeding Up Your Web Site 不陌生。而这 35 条最佳实践中，对 Javascript 的加载顺序的要求是：Put Scripts at the Bottom。因为根据 HTTP/1.1 specification 看来，在同一时间加载两个文件是最理想的，而 Javascript 脚本会阻碍平行下载。Steve 说那是 2008 �C 2009 那个时代用的。现在，加载 Javascript 已经有了革命性的化变。

在开讲之前，有一个必须解决的问题是：为什么我们要把 JS 文件放在 之前的最底部。根本原因是，它不能平行下载。而其实并不是所有浏览器都不支持。现在大部分浏览器都支持 Script 的平行下载，除了老掉牙的 IE6&7、Firefox 2&3.0、 Safari 3、Chrome 1。但我们最熟悉的老掉牙同学 IE6 （或以IE为核的那些壳）还是中国（甚至世界上）市场上占用率最高的浏览器，因此我们需要一个折衷的方案。

一、分析

我们有6种方法可以实现平行（NON-Blocking）下载：

• XHR Eval �C 用 XHR 下载，并 eval() 执行 responseText.。
• XHR Injection �C 用 XHR 下载，在页面中动态创建一个 script 元素，并将 responseText 作为其 text 。
• Script in Iframe �C 把脚本放在 HTML 中，使用 ifame  来下载它。
• Script DOM Element �C 动态创建一个 script 元素，把 src 指向脚本URL.
• Script Defer �C 给 script 标添加 defer 属性
• document.write Script Tag �C 利用 document.write 把



在 HTML5 上，我们可以使用 async 属性。这个 HTML 属性的作用正是我们需要的 NON-Blocking 下载技术。虽然目前支持的浏览器并不多（似乎只有 Firefox 3.6+ ?），但给需要平行下载的 Javascript（按照方案看来，一般是第一个 JS 文件） 加上这个属性，也不会影响其他不支持的浏览器，所以，是推荐使用的。

复制代码 代码如下:

四、实践
YUI3 的 Loader 使用了 NCZ 的这样的方法。而在支付宝。我们也使用了类似的方法。这里简单说一下。

复制代码 代码如下:

在使用的时候，再利用 Loader.use() 来实现代码的动态加载。当然，这里不仅仅是动态加载，还有一定的缓存机制在里面。建议你查看相关的 combo 服务的技术。目前支付宝前端架构组的工友们，已经在这一块取得了一些不错的进展（根据测试报告，速度是非常不错的，可能会在适当的时候开源出来）。

五、总结
前端性能优化方面。还有很多东西可以做。并且，随着 HTML5 技术的出现和 Javascript 技术的不断创新，相信还有更多东西是值得期待。前端们，加油吧，未来有很多东西应该是由你来主导的。

Reference:

1. Loading Scripts Without Blocking
2. The best way to load external JavaScript
3. Evolution of Script Loading
4. What is a non-blocking script?
5. HTML5 �C Scripting: async Attribute