岁月如歌

规律：半角空格的 charCode 为 32, 全角空格为 12288. 其他半角字符 ( 33 – 126 ) 与全角 ( 65281 – 65374 ) 的对应关系是：均相差 65248.

找好规律，代码就好写了：

var hash = {'32' : '\u3000'};
// 半角转全角
function sbc2dbc(str) {
    var ret = [], i = 0, len = str.length, code, chr;
    for (; i < len; ++i) {
        code = str.charCodeAt(i);
        chr = hash[code];
        if (!chr && code > 31 && code < 127) {
            chr = hash[code] = String.fromCharCode(code + 65248);
        }
        ret[i] = chr ? chr : str.charAt(i);
    }
    return ret.join('');
}

阅读全文 »

经克军提醒，在博客上也搭建了个 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 中规中矩，不出色，但也不糟糕。

测试场景：给 table 的 150 个 tr 添加style="color: #ccc", 重复 20 次。
测试页面：dom-manipulation.html

点击每个测试按钮前，都重新启动浏览器。手工记录 10 * 4 * 4 次无明显偏差的数据，取平均值，可得到以下统计结果：

其它 DOM 操作结果类似。

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

在 如何给 JavaScript 文件传递参数 一文中，介绍了一种传参方式：

<script type="text/javascript" src="test.js?a=b&c=d"></script>

这种方式看起来最漂亮最容易被后台程序员接受，但没有考虑到缓存因素。
由于参数一般都是变化的，上面的方式会导致 js 文件每次都重新下载，实在是很糟糕。

特发此文，警醒！

CSS Sprite 最大的好处是：减少 HTTP 链接数。

页面上的数据，通过 TCP/IP 包传输。在 1M ADSL 环境下，网速最大值为 128 Kb/s, MTU(Maximum
Transmission Unit) 的大小默认为 1500 bytes. 去掉 TCP/IP 的头部信息 40 bytes, 一个 package 可以容纳的文件大小为 1460 bytes. 下面是一张示意图：

需要的包越少，意味着速度越快。

例子：淘宝首页有一张 sprite: hd_20090313.png, 大小为 5.71 KB (5848 bytes). 需要 5 个包来传输（5848 / 1460 = 4.005）。看数据，只多出了 8 bytes. 优化到 5840 bytes 后，就可以减少一个传输包。

也许吹毛求疵了，但对于关键页面，任何细节优化，有时都是值得的。

类似的，对于页面中的链接数量，也可以考虑浏览器的最大并发数来做细节优化。比如，在 Firefox 下，同一个 host 的最大并发数为 6, 增加链接数对下载时间的影响如下：

当链接数从 6 的整数倍增 1 时，下载时间明显增大。考虑 IE6 最大并发数是 2, 减少链接数时，尽量减少到偶数，是一个不错的优化守则。

参考资料

• CSS Sprites: Image Slicing’s Kiss of Death
• CSS, Image Sprites, Background Images and Website Optimization

PS: 出一道题目考考大家：CSS Sprite 的缺点是什么？