技术头条 - 一个快速在微博传播文章的方式     搜索本站
您现在的位置首页 --> JavaScript --> The Deferred Evaluation of YUI 3

The Deferred Evaluation of YUI 3

浏览:1994次  出处信息

    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 能为页面减少的加载时间。

    YUI3 Deferred Evaluation Chart

    上图是在 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框架的区别和应用场景简述    (阅读:3047)
  2. CSS实现HTML元素透明的那些事    (阅读:2834)
  3. YUI 还是 jQuery?    (阅读:2739)
  4. 动态加载JavaScript的小实践    (阅读:2232)
  5. 使用YUI 3开发Web应用的诀窍    (阅读:2070)
  6. 使用minify合并YUI请求    (阅读:1968)
  7. YUI3设计中的激进和妥协    (阅读:1645)
QQ技术交流群:445447336,欢迎加入!
扫一扫订阅我的微信号:IT技术博客大学习
© 2009 - 2024 by blogread.cn 微博:@IT技术博客大学习

京ICP备15002552号-1