JS 的加载速度，包括下载和运算两部分（参考 JavaScript Library Loading Speed）：

    Total_Speed = Time_to_Download + Time_to_Evaluate

    运算（evaluate）又可细分为解析（parse）和执行（execute）。对于动态语言来说，解析和执行是交替进行的。考虑加载速度时，一般放在一起考虑。

    通常来说，下载时间是影响 JS 加载速度的关键。这方面的优化已经很成熟，比如 Compressor, GZip, Cache 等等。

    evaluation 部分，目前主要优化方案是延迟（称之 Deferred Evaluation）。具体策略有：

将 JS 代码以注释的形式下载，需要使用时再 parse. 可以参考 GMail for Mobile Team 的研究。将 JS 代码以字符串定义的形式下载。可以参考 SproutCore Blog 的分析。将 JS 代码以闭包的形式下载。

    第一种策略能将 evaluation 完全延迟，后两种还存在少量未被延迟的 evaluation, 但和第一种差异很小。下面讨论第三种。

YUI 3

    YUI 3 的模块定义代码：

YUI.add("module-a", function(Y) {    /* module code */});

    模块添加到 YUI 上时，function(Y)作为一个整体(closure)注册到环境变量里，module code 尚未执行。

    模块调用代码：

YUI().use("module-a", function(Y) {    /* user code */});

    此时，定义代码中的 function closure 才被调用：执行 module code, 将 module a 挂载到 YUI 的实例 Y 上。

    很显然，YUI 3 的模块定义和加载机制，非常自然地实现了 Deferred Evaluation 的第三种策略。我们来看看效果如何。

Tests

    测试页面：deferred evaluation test

    测试方法：点击 Load YUI3 按钮，会看到第二个 iframe 重复加载 5 次。加载完成后，点击 iframe 里的 Run Again （确保有缓存）。结果里的 Setup - Load 的时间差值，就是 Deferred Evaluation 能为页面减少的加载时间。

    

    上图是在 T61 上的测试结果。加载的 JS 文件是 yui3-combo-min.js, 仅打包了 YUI3 的基础模块。

    从结果上可以看出，对于普通电脑来说，Deferred Evaluation 带来的性能提升并不明显：差异最大的 Safari 上，也仅减少了不到 50ms. 但可以推测：电脑 CPU 越低，Deferred Evaluation 带来的提升会越明显，比如 Mobile 应用上。

结论

对于 YUI 3 来说，这是沙箱和模块加载机制带来的意味惊喜：能减少初始加载时间总是好的，虽然微不足道。对于 Mobile 应用来说，Deferred Evaluation 非常值得尝试，Gmail for Mobile 团队走在了前列。对于普通 Web 应用来说，JS 加载的主要性能优化点依旧是减少文件本身的大小，比如将 YUI Compressor 换成 Google Closure Compiler.

    最后推荐 Ara Pehlivanian 的博文：JavaScript loading strategies, JS 加载有五个方面的优化策略：Reduce(减少文件大小), Defer(延迟), Go Async(异步), Be Lazy(懒加载), Bite Size(真的需要 JS 吗)，这五点特别是最后一点，需要我们的坚持和努力。

建议继续学习：

1. JQuery,Extjs,YUI,Prototype,Dojo 等JS框架的区别和应用场景简述    (阅读：2929)
2. CSS实现HTML元素透明的那些事    (阅读：2832)
3. YUI 还是 jQuery?    (阅读：2696)
4. 动态加载JavaScript的小实践    (阅读：2131)
5. 使用YUI 3开发Web应用的诀窍    (阅读：2036)
6. 使用minify合并YUI请求    (阅读：1935)
7. YUI3设计中的激进和妥协    (阅读：1620)