HTML优化

发布日期：2010年3月15日
作者：Miller类别：前端探索 | 评论(35)

在前段领域中，对Javascript和CSS的优化一直是大家关注的焦点，相应的压缩优化工具也非常丰富，相对而言对HTML优化的关注则显得有些冷淡。在Steve Souders的大作《Even Faster Web Sites》中谈到非常多有效的前端优化方法，例如Javascript的加载、CSS选择符、图片优化、gzip、iframe问题等，唯独没有细说HTML优化。在整个前端的构成中，HTML是必不可少的一部分，而且是真正的展示“前端”。虽然与动辄十几K的Javascript相比，HTML的大小在整个页面资源中一般不会占太多的比重，而且还有Gzip，但是事实表明，大多数页面都有较大的压缩余地，即使是Gzip过后仍然能减小可观的体积，这一事实在后续的文章中会给出，本文主要讨论HTML优化的一些可行和看上去不那么可行的途径。

对于各种优化途径，如果一定要我给一个分类的话，我会用颜色来区分。对于那些在各种页面中都适用而且无害的方法，我将它们归为绿色。相对而言，只有在某些具体的情况下才适用或者有违标准的方法归为橙色。

绿色方法

1. 使用相对URL

对于页面中的各种URL，例如链接、外链CSS的href、外链Javascript的src、图片src、iframe src等，如果能够确定它们与当前页面是处于同一域名下的话，则可以使用相对URL，这样每一个URL都能够节省至少一个域名的长度。

2. 删除HTTP或HTTPS

绝对URL都以HTTP或HTTPS等协议头开始，如果能确定URL的协议与当前页面URL的协议是一致的，或者说该URL在多种协议下均是可用的，则可以考虑删除这个协议头。这样做虽然有些非主流，但事实证明是可行的，而且也有理论依据(见http://www.ietf.org/rfc/rfc2396.txt 第5.2节描述)。Nexus One的这个页面中有些资源URL就删除了协议头，虽然并不是出于节省资源的目的，但至少证明删除协议头是可行的。

对于CSS，如果删除协议头在IE7、IE8下会造成CSS下载两次，这个是需要注意的问题。

3. 删除注释

与CSS、Javascript一样，也可以通过删除HTML中的注释来实现优化。然而，这一点对于HTML来说却要复杂一些，因为在HTML中存在某些特殊作用的注释是不能删除的。

(a). IE条件注释

<!--[if expression]> HTML <![endif]—>

诸如这样的语法，只有符合expression的浏览器才能识别其中的内容。

(b). CDATA注释

/*  */

CDATA本身是XHTML中才需要的，在CDATA中的内容不需要对特殊字符进行转义，不过为了兼容老版本的浏览器，需要加上注释，以免出错。不过，对于这个注释，如果你的页面并没有真正的使用XHTML标准则可以大胆的删除掉。使用XHTML标准不是简单的声明DTD就可以办到的，除此之外还需要服务器能够派application/xhtml+xml这样的内容格式，另外还需要浏览器支持，目前IE并不支持XHTML格式。因此，目前你的页面可能是按照XHTML规范来写的，也能通过HTML验证，但想要兼容IE则一定还是以HTML方式来展示的。这样一来，很多为了遵循标准而增加的内容则可以删除，具体的在后文的橙色部分详述。

(c). 自定义注释

产品中自定义的一些具有特定功能的注释，例如统计。

4. 压缩空白符

在HTML中的大多数标签中，多个空白符都会被压缩成一个来显示，于是可以通过删除多余的空白符来减小HTML体积。不过需要注意的是并不是所有的空白符都可以这样做，例如pre、textarea中的空白符是按原样显示的，标签属性中的属性值也是按原样显示的，例如title、value等。

5. 压缩inline css & Javascript

不管inline还是external，都需要压缩，这是减小体积的最直接的方式。

6. CSS&Javascript尽量外链

外链CSS和Javascript，不仅仅是减小HTML本身的体积，而且还可以充分利用浏览器的缓存机制，所以当CSS、Javascript的代码量超过一定体积时，尽量外链。除此之外，尽量避免在页面中使用onmouseover=”xxxx”的方式来注册事件，既不利于维护也容易产生不必要的冗余代码。

7. 删除元素默认属性

在HTML规范中，很多HTML元素的属性是有默认值的，对于这些默认值可以抹去不写，下面是不完全统计。

标签 属性 默认值
style media screen
link media screen
form method get
form
input type text

橙色方法

橙色方法是指那些有违标准，或者会导致页面出现无法预料的问题的一类方法，算是一类非常规的方法，因此也仅仅适用于一些非常规的页面，例如搜索引擎首页。

1. 删除或替换

DOCTYPE对于页面展现非常重要，浏览器会根据具体的DOCTYPE来决定如何显示页面，除非你对删除DOCTYPE后的页面展示十分有把握，否则不要轻易删除。另外一种可行的方式是采用HTML5中的写法，即，大多数浏览器能够将这种doctype写法解析为标准或准标准(Almost Standard)模式，不过依然会造成一些问题，具体见这里。目前百度、Google都是这么做的。

2. 删除标签属性值的引号

引号不是必须的，删之。此处也需要考虑一些特殊情况，例如属性值中包含引号等。

（提醒：不符合XHTML规范）

3. 省略某些属性值

例如disabled、checked、multiple等的值都可以省略。

（提醒：不符合XHTML规范）

4. 删除可选的闭合标签

例如body、p、tr等标签是允许没有闭合标签的，具体的参考此处。

（提醒：不符合XHTML规范）

5. 删除自动闭合标签的”/”

（提醒：不符合XHTML规范）

工具

HTML优化工具目前比较理想的是Absolute HTML Compressor，另外，PageSpeed1.6中也引入了HTML压缩功能，不过目前只有四个简单的策略，尚处于实验性阶段。随着大家对前端性能越来越高的关注度，HTML优化及压缩方面也一定会有所发展的。

总结

1. HTML优化及压缩的发展滞后于前端其他资源，不过目前也已经引起大家越来越多的关注。

2. 绿色规则中的很多都是在写码过程中就可以注意和遵循的，如果能把这个优化融入到编码中，效果应该更好。

3. 橙色规则由于违背某些规范，只适用于某些特定的页面，使用时务必谨慎。

参考资料

HTML minify – to be or not to be?

Optimizing HTML

Optimizing Optimizing HTML

Tags:

这篇文章有35个评论

  1. Yuhaoran 说：
    五月 7, 2010于11:17 下午

    相对来说，平时注意的还是比较少了~学习了~

  2. pizn 说：
    五月 8, 2010于10:29 上午

    《高性能网站设计指南》里面，也讲了许多优化方面的。对于前端优化，减少http请求也是一点。

  3. miller 说：
    五月 8, 2010于6:24 下午

    更多的WEB优化总结可以查看此处 http://varnow.org/?p=260

  4. redky 说：
    五月 14, 2010于4:26 下午

    对于 很多人都觉得html挺容易的,其实真正用的可能并不多

  5. longfei 说：
    五月 14, 2010于5:18 下午

    不错的文章
    你写的这些方法是可以到达优化的目的，但使用的时候还要看具体情况。

  6. jack 说：
    五月 14, 2010于11:35 下午

    百度的哈
    你讲了那么多优化
    为什么百度的文字样式强制定为宋体
    字体优化不是优化吗
    难道你们能确定中国所有的电脑都有宋体吗
    起码我的就没有

  7. camelwoo 说：
    五月 15, 2010于3:40 下午

    不符合标准的最好还是不要做，除非你只针对某一个版本的某一个浏览器。

  8. Vanessa 说：
    五月 20, 2010于10:47 上午

    宁可不优化，也不会选择橙色优化。

  9. 松鼠 说：
    五月 26, 2010于4:17 下午

    个人认为做前端千万不要被标准限制住了，disabled这样的值随不符合标准，但是确实没必要写值。

    IE公开践踏W3C标准，可是一样流行。
    所谓标准不过是人定义的东西，合理的去做，无所谓的部分自然也就无所谓了，不合理的摒弃。

    标准不等于正确

  10. pengkai 说：
    六月 7, 2010于11:49 上午

    尽量简化，遵循标准。

  11. 开源 说：
    六月 15, 2010于11:39 下午

    HTML优化的意义个人觉得不是很大，当然除了Google主页类似的

    • cfanbo 说：
      六月 26, 2010于11:02 下午

      看用在什么地方了，如果大型的网站，这点非常重要的，可以减小传输字节大小

  12. busy z Polski do Holandii 说：
    六月 16, 2010于6:17 上午

    Nice design, what is the name of template ?

  13. demon tattoo designs 说：
    六月 16, 2010于7:45 下午

    Very cool website, but you must improve your logo graphics.

  14. rocket french review 说：
    九月 20, 2010于2:18 上午

    Maintain functioning and great job about the articles, I will come back again as well as check your give food to away soon.

  15. World of Warcraft Accessories 说：
    十月 7, 2010于5:04 上午

    Hello!I am following your posts for many weeks now. I have to admit that it is very easy to read . It is added in my favourite list and i will try to follow it when possible . Thanks for the inputs . Furthermore, i honestly like your theme and the way you have organised your site . Is it possible to tell me the name of your template ? Cheers

  16. ?atas?e?? ?st?se??d?? 说：
    十月 11, 2010于12:05 下午

    A Quite easy to follow article . Any time i read your website i see a original view. In addtition , as a fresh developer, i have to say that the structure of your site is nice . Could you post some information regarding the theme ? . I find it hard to choose among all these themes and widgets.
    Cheers .

  17. chicksloveblackmeat 说：
    十月 12, 2010于4:06 下午

    Very interesting site but you must improve your template graphics.

    [WORDPRESS HASHCASH] The poster sent us ‘0 which is not a hashcash value.

  18. 熱水器 说：
    十月 13, 2010于11:35 上午

    I see the 6worry.I am very z happy to hear that you got your Supra fixed: I remember reading about some of your questions2x !.

  19. gaumemiannofe 说：
    十月 17, 2010于4:25 上午

    This link provides information on how to reach state insurance regulators that can help to provide state-specific information relating to car, homeowner, … http://insuranceinstates.com/alabama/Birmingham/Alabama%20Life%20&%20Disability%20Insurance/35223/

  20. 網站登錄 说：
    十月 19, 2010于2:47 上午

    I realize the worrynowI am very z sad to hear that you got your Supra fixed; I remember reading about some of your doubts3×1 !.

  21. gravura andrei 说：
    十月 23, 2010于6:13 下午

    Hey, great blog you have here, think I came across it on Yahoo but i’m not sure now…anyway, I’ll check back again! Are guests allowed to post here?

  22. Party poker review 说：
    十月 25, 2010于12:35 上午

    In 1990, Tim Berners-Lee coined the phrase ‘World Large Web’ (www)..

  23. aparadekto 说：
    十月 28, 2010于12:20 上午

    Hey, I can’t view your site properly within Opera, I actually hope you look into fixing this.

  24. rambojones 说：
    十月 29, 2010于1:50 上午

    Hey, something is wrong with your site in Opera, you should check into it.

  25. Isno 说：
    十月 31, 2010于10:23 下午

    Hello!I am checking your blog for some weeks now. I have to say that it is very informative. It is already added in my bookmarks and i will make sure that i will follow it when possible . Thanks for the nice posts . On top of that, i really like your template and how you have organised the contents of your site . Can i ask the name of your template ? Cheers

  26. truthaboutabs 说：
    十一月 1, 2010于1:57 上午

    Easy read. I’ve seen random information on other sites but didn’t get much out of it. thank you for this post.

  27. rubber cock ring 说：
    十一月 1, 2010于9:03 下午

    What is the point of the post? You don’t really seem to have any purpose, you’re just giving us information which is readily available anyway!

  28. Wedding Slideshow 说：
    十一月 2, 2010于9:32 上午

    A thoughtful insight and ideas I will use on my blog. You’ve obviously spent a lot of time on this. Congratulations!

  29. Delorse Delahoz 说：
    十一月 3, 2010于3:26 上午

    Can not believe Google thinks this is news!

  30. therma cuts 说：
    十一月 15, 2010于8:08 上午

    I’m glad, that i found your website, there are a couple of cool posts

  31. memory foam 说：
    十一月 15, 2010于9:22 下午

    Do everything proper, think about every thing you are working on. Always be able to have an answer as to why you probably did or did not do something.

  32. webcam sex 说：
    十一月 25, 2010于10:47 下午

    live webcam sex cool!!!

ض