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, 但和第一种差异很小。下面讨论第三种。
阅读全文 »
JavaScript 框架的 DOM 操作性能
经克军提醒,在博客上也搭建了个 TaskSpeed:
http://lifesinger.org/labs/taskspeed/
将感兴趣的框架都更新到最新版本。修改了部分 tests.js, 以保证主流浏览器下所有用例都能得到正确结果。
特别修改了 YUI 2.8 的测试文件:yui-tests.js. 原测试文件大量使用YAHOO.util.Selector这个并不推荐使用的类,不符合 YUI 2 的实际使用情况(一般仅使用 yahoo-dom-event, get, anim 等 utilities)。
从测试结果可以看出:
前三甲是 Dojo 1.4, jQuery 1.4, YUI 2.8
MooTools 在 Safari 下表现优异,其它浏览器下有些惨淡。
Prototype 老矣,尚能饭否?
YUI 3 中规中矩,不出色,但也不糟糕。
Fastest JavaScript Trim
这是 2007 年的一篇老文:Faster JavaScript Trim.
测试页面:trim-test.html
感兴趣的几个方法:
function trim1(str) {
return str.replace(/^\s\s*/, '').replace(/\s\s*$/, '');
}
function trim2(str) {
return str.replace(/^\s+/, '').replace(/\s+$/, '');
}
function trim4(str) {
return str.replace(/^\s+|\s+$/g, '');
}
function trim8(str) {
return str.replace(/^\s*((?:[\S\s]*\S)?)\s*$/, '$1');
}
时至今日,有些结论已经发生变化:
阅读全文 »
YUI3 DOM Manipulation Performance Test
测试场景:给 table 的 150 个 tr 添加style="color: #ccc", 重复 20 次。
测试页面:dom-manipulation.html
点击每个测试按钮前,都重新启动浏览器。手工记录 10 * 4 * 4 次无明显偏差的数据,取平均值,可得到以下统计结果:

其它 DOM 操作结果类似。
结论:当页面较复杂,DOM 操作较多时,YUI3 会明显增加脚本执行时间,存在性能隐患。
阅读全文 »
