在前段领域中，对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注释

<script type="text/javascript">
/* <![CDATA[ */
// content of your Javascript goes here
/* ]]> */
</script>

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
fo 免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。 相关资料更多> 思妙FLASH MX 2004视频教程(2)－物体移动 什么样的产品流程才是好的产品流程？ 以用户为中心的设计:人找事的时分 Flash MX 2004 ActionScript图文教程(七) 优化系统让Photoshop运转更流利 预加载进度条（preload）——基础篇 Photoshop外挂滤镜 运用FrontPage制造网页的优缺陷 AS3 Scale9 Bitmap类 推荐阅读更多> 内容为王Friend feed如何做大 Dreamweaver MX 2004视频宝典教程(63) Flash Action控制的鼠标弹性指针效果 交互设计思想:思想盲点 以目的用户为中心设计的3个C 优秀的产品经理:不要过于强调自己的想法 设计思想:用户界面（UI）在中国的开展历程 Dreamweaver电子邮件表单的制作_DreamWeaver基础教程_DreamWeaver教程 设计:一个任性的设计师 用FrontPage树立自己的网站：运用导游和模板 Dreamweaver架设网站终极教程 Dreamweaver MX 2004视频宝典教程(71) 处置Dreamweaver不支持中文文件名 《灵动传说》源文件地下下载 Dreamweaver MX 2004 CSS使用教程之CSS背景属性_DreamWeaver2004专区_DreamWeaver教程 Dream Weaver的臭虫和缺陷 产品设计的用户需求了解:产品设计实际的五项准绳 网站视觉设计的一些要点 产品设计就是组装用户心思需求的满足方式 Dreamweaver MX 2004视频宝典教程(9)