不应忽视的HTML优化

作者 崔康 发布于 2010年5月13日

领域

企业架构,

运维 & 基础架构,

架构 & 设计,

语言 & 开发

主题

XHTML ,

JavaScript ,

CSS ,

HTML ,

Java ,

动态语言 ,

HTTP ,

标识语言 ,

最佳实践 ,

语言 ,

性能调优 ,

W3C ,

Web 2.0 ,

编程 ,

企业架构 ,

RIA ,

互联网 ,

百度 ,

性能和可伸缩性 ,

规范

分享到

随着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）专题。

崔康 热情的技术探索者，资深软件工程师，InfoQ编辑，从事企业级Web应用的相关工作，关注性能优化、Web技术、浏览器等领域。

相关厂商内容

保持某些系统的高可用性，是一些企业的重中之重，如何设计？

海量数据处理，海量视频分发，架构热点难点，尽在架构师峰会！

相关赞助商

ArchSummit全球架构师峰会报名启动！7折优惠，5月31日截止！

1. 返回顶部

   不错不错

   发表人 张 凯峰

   RT

   回复

2. 返回顶部

   主要就是压缩文本大小。

   发表人 Ma Karl

   RT

   回复

3. 返回顶部

   长见识了

   发表人 Kyle Kyle

   RT

   回复