岁月如歌

CSS 和 JavaScript 的压缩已经很成熟，各大网站都在使用。HTML 的压缩（特指去除空白字符和注释），除了 Google 等搜索页面，在其它网页上基本见不到踪迹。

原因很简单：

1. HTML 文档中，多个空白字符等价为一个空白字符。也就是说换行等空白字符的删除是不安全的，有可能导致部分元素的样式产生差异。
2. HTML 元素中，有一个pre, 表示 preformatted text. 里面的任何空白，都不能被删除。
3. HTML 中有可能有 IE 条件注释。这些条件注释是文档逻辑的一部分，不能被删除。

只想到以上 3 点，可能还有其它陷进。对于动态页面来说，HTML 的压缩有可能还会增加服务器的 CPU 负担，得不偿失。

一般来说，通过 gzip 压缩已经能达到很好的效果。进一步的压缩存在陷进，除非能像 Google 一样充分测试（Google 也仅压缩了少部分核心服务的页面），否则不推荐对 HTML 进行压缩处理。

Google Closure Compiler 挺让人心动。昨晚试用了一把，与 YUICompressor 的对比如下：

下载 DOS 脚本包：downloads list

老话题了，直接看代码：

// 方式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 都是最优的。