岁月如歌

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 的缺点是什么？

老话题了，直接看代码：

// 方式A：直接采用多行写法
var a = '\
<div class="kissy-toolbar-button" title="{TITLE}">\
    <div class="kissy-toolbar-button-outer-box">\
        <div class="kissy-toolbar-button-inner-box">\
            <span class="kissy-toolbar-{NAME}">{TEXT}</span>\
        </div>\
    </div>\
</div>';

// 方式B：用+号
var b = '<div class="kissy-toolbar-button" title="{TITLE}">' +
            '<div class="kissy-toolbar-button-outer-box">' +
                '<div class="kissy-toolbar-button-inner-box">' +
                    '<span class="kissy-toolbar-{NAME}">{TEXT}</span>' +
                '</div>' +
            '</div>' +
        '</div>';

// 方式C：用数组join
var c = ['<div class="kissy-toolbar-button" title="{TITLE}">',
             '<div class="kissy-toolbar-button-outer-box">',
                 '<div class="kissy-toolbar-button-inner-box">',
                     '<span class="kissy-toolbar-{NAME}">{TEXT}</span>',
                 '</div>',
             '</div>',
         '</div>'].join('');

考虑用 YUICompressor 压缩后的代码：test-min.js

很明显，对于纯排版美化的字符串连接来说，无论从性能还是压缩量上看，方式 B 都是最优的。

原文

Steve Souders: Positioning Inline Scripts. 好文无需废话，推荐仔细阅读。

测试

值得注意的一个结论：

要避免将内联脚本放在样式表和页面其它资源之间，这非常重要。这会使得看起来像是样式表阻塞了后续资源的下载。这种行为的原因是：所有主流浏览器都会保持CSS和JavaScript的顺序。在样式表完全下载、解析及应用之后，内联脚本才能执行。同时，必须在内联脚本执行后，剩余资源才能下载。这就使得，放在样式表和内联脚本之后的资源，下载被阻塞了。

内联脚本放在样式表之前，样式表和脚本的下载是并发的 阅读全文 »