The Deferred Evaluation of YUI 3
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
测试方法:点击 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 吗),这五点特别是最后一点,需要我们的坚持和努力。
建议继续学习:
- JQuery,Extjs,YUI,Prototype,Dojo 等JS框架的区别和应用场景简述 (阅读:3047)
- CSS实现HTML元素透明的那些事 (阅读:2834)
- YUI 还是 jQuery? (阅读:2739)
- 动态加载JavaScript的小实践 (阅读:2232)
- 使用YUI 3开发Web应用的诀窍 (阅读:2070)
- 使用minify合并YUI请求 (阅读:1968)
- YUI3设计中的激进和妥协 (阅读:1645)
扫一扫订阅我的微信号:IT技术博客大学习
- 作者:lifesinger 来源: 岁月如歌
- 标签: YUI
- 发布时间:2010-01-12 13:26:18
- [68] Go Reflect 性能
- [68] 如何拿下简短的域名
- [67] Oracle MTS模式下 进程地址与会话信
- [62] IOS安全–浅谈关于IOS加固的几种方法
- [61] 图书馆的世界纪录
- [60] 【社会化设计】自我(self)部分――欢迎区
- [58] android 开发入门
- [56] 视觉调整-设计师 vs. 逻辑
- [49] 给自己的字体课(一)——英文字体基础
- [48] 读书笔记-壹百度:百度十年千倍的29条法则