不应忽视的 HTML 优化

随着 Web2.0 技术的不断发展，Web 前端的优化受到越来越多的关注，特别是 JavaScript 和 CSS 优化的讨论一直是热点，工具也相对丰富，而对 HTML 优化则有所忽视，最近，来自百度泛用户体验团队的工程师 Miller （chenminliang）撰文强调了HTML 优化的重要性和相关技巧。

Miller 首先举例说明了 HTML 优化稍显忽略的事实：

在 Steve Souders 的大作《 Even Faster Web Sites 》中谈到非常多有效的前端优化方法，例如 Javascript 的加载、CSS 选择符、图片优化、gzip、iframe 问题等，唯独没有细说 HTML 优化。

他强调 HTML 优化虽然看似微小，但是不可忽视：

在整个前端的构成中，HTML 是必不可少的一部分，而且是真正的展示“前端”。虽然与动辄十几 K 的 Javascript 相比，HTML 的大小在整个页面资源中一般不会占太多的比重，而且还有 Gzip，但是事实表明，大多数页面都有较大的压缩余地，即使是 Gzip 过后仍然能减小可观的体积…

Miller 在文中总结了 HTML 优化的各种方法，将其分为两类：绿色规则——在各类页面中适用且无害和橙色规则——在某些具体的情况下才适用或者有违标准。

绿色规则可以概括为以下几种：

• 使用相对 URL，某些 href、src 属性如果与当前页面处于同一域名下，则使用相对 URL 能够节省至少一个域名的长度。
• 删除 HTTP 或者 HTTPS，绝对 URL 都以 HTTP 或 HTTPS 等协议头开始，如果能确定 URL 的协议与当前页面 URL 的协议是一致的，或者说该 URL 在多种协议下均是可用的，则可以考虑删除这个协议头。
• 删除注释，考虑不必要的 IE 条件注释和 CDATA 注释及自定义注释。
• 压缩空白符，对于多数标签，可以通过删除多余的空白符来减少 HTML 体积，但是对于 pre 等是例外。
• 压缩 inline css & Javascript，不管 inline 还是 external，都需要压缩，这是减小体积的最直接的方式。
• CSS&Javascript 尽量外链，不仅可以减少体积，还能够充分利用浏览器的缓存机制。
• 删除元素默认属性，在 HTML 规范中，很多 HTML 元素的属性是有默认值的，对于这些默认值可以抹去不写。

橙色规则就不一一列举了，感兴趣的读者可以直接查看原文。

除了优化技巧之外，Miller 特别推荐了两款相关工具——Absolute HTML Compressor 和 PageSpeed1.6：

HTML 优化工具目前比较理想的是 Absolute HTML Compressor ，另外， PageSpeed1.6 中也引入了 HTML 压缩功能，不过目前只有四个简单的策略，尚处于实验性阶段。

随着 Web 前端性能受到越来越多的关注，包括 HTML 优化在内的各个领域将得到进一步的发展，并不断提高 Web 的用户体验，InfoQ 将继续关注和报道相关进展，感兴趣的读者可以查看富互联网（RIA）专题。