Web前端是庞大的，包括HTML、CSS、Javascript、Image、Flash等等各种各样的资源。前端优化是复杂的，针对方方面面的资源都有不同的方式。那么，前端优化的目的是什么？
1. 从用户角度而言，优化能够让页面加载得更快、对用户的操作响应得更及时，能够给用户提供更为友好的体验。
2. 从服务商角度而言，优化能够减少页面请求数、或者减小请求所占带宽，能够节省可观的资源。
总之，恰当的优化不仅能够改善站点的用户体验并且能够节省相当的资源利用。
前端优化的途径有很多，按粒度大致可以分为两类，第一类是页面级别的优化，例如HTTP请求数、脚本的无阻塞加载、内联脚本的位置优化等；第二类则是代码级别的优化，例如Javascript中的DOM操作优化、CSS选择符优化、图片优化以及HTML结构优化等等。
在前端领域中，对Javascript和CSS的优化一直是大家关注的焦点，相应的压缩优化工具也非常丰富，相对而言对HTML优化的关注则显得有些冷淡。在整个前端的构成中，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 |
| form | ||
| input | type | text |
橙色方法
橙色方法是指那些有违标准，或者会导致页面出现无法预料的问题的一类方法，算是一类非常规的方法，因此也仅仅适用于一些非常规的页面，例如搜索引擎首页。
1. 删除或替换<!DOCYTYPE>
DOCTYPE对于页面展现非常重要，浏览器会根据具体的DOCTYPE来决定如何显示页面，除非你对删除DOCTYPE后的页面展示十分有把握，否则不要轻易删除。另外一种可行的方式是采用HTML5中的写法，即<!doctype html>，大多数浏览器能够将这种doctype写法解析为标准或准标准(Almost Standard)模式，不过依然会造成一些问题，具体见这里。目前百度、Google都是这么做的。
2. 删除标签属性值的引号
引号不是必须的，删之。此处也需要考虑一些特殊情况，例如属性值中包含引号等。
（提醒：不符合XHTML规范）
3. 省略某些属性值
例如disabled、checked、multiple等的值都可以省略。
（提醒：不符合XHTML规范）
4. 删除可选的闭合标签
例如body、p、tr等标签是允许没有闭合标签的，具体的参考此处。
（提醒：不符合XHTML规范）
5. 删除自动闭合标签的”/”
（提醒：不符合XHTML规范）
总结
1. 绿色规则中的很多都是在写码过程中就可以注意和遵循的，如果能把这个优化融入到编码中，效果应该更好。
2. 橙色规则由于违背某些规范，只适用于某些特定的页面，使用时务必谨慎。
3. HTML优化及压缩的发展滞后于前端其他资源，不过目前也已经引起大家越来越多的关注。以下是我总结的一套符合SEO规范的HTML优化方式：
1）H标签的使用，值得注意的是，不论任何页面，h1标签只能出现一次，它是当前页面的主标题，权重最高，对蜘蛛的吸引力是最强的。再往下就是h2、h3、h4、h5、h6这些副标题了，所强调的重点也是递减的，当然，它们的出现频率没有明确限制。
2）strong标签的使用，strong标签对关键词的强调作用仅次于H标签，个人实际布局中会比较在文章内容里出现，用于加粗段落标题或是重点关键词。
3）<title>网站SEO标题</title>、<meta name=”description” content=”网站描述” />和<meta name=”keywords” content=”网站关键词” />，这是SEO的重点。很好理解，比如我们利用搜索引擎搜索某个关键词，返回的搜索结果中，都是以标题、描述和变色关键词形式出现的。关于网站关键词，许多SEOer还是有争议，认为已经越来越不被搜索引擎重视了。不过，个人觉得，不要偷懒，加上总是没有坏处。需要注意一点，不论是网站标题还是描述、关键词，都不要堆砌，搞实在点的，否则网站容易被搜索引擎惩罚甚至网站被K，那只能自己去哭吧。
4）<a href=”链接地址” title=”链接说明”>链接关键词</a>，站内丰富的超链接会方便蜘蛛爬行，体现网站的深度和广度，这点在SEO中至关重要。“链接地址”特别是栏目的链接地址，最佳的出现形式应该是http://你的域名/固定链接/。现在，链接的理想结构是以“/”结尾，可以参考小拼SEM博客的链接形式。“链接说明”，一般都是链接的关键词或是关键词相关说明文字，这点可能很多人容易忽视，建议还是写好链接说明，尤其是做外部链接的时候，这么做效果还是很不错的，对网站关键词的搜索引擎排名很有帮助。
5）<img src=”图片链接地址” alt=”图片说明” />，这是针对网页中图片的，当然也可以写成<img src=”图片链接地址” title=”图片说明” />。关于图片说明是用alt还是title，之后的文章会和大家探讨的。不过，这个图片说明是肯定要加的，方便搜索引擎知道这张图片描述的内容，也有利于在图片搜索结果中获得一个好的排名。
6）<div id=”copyright”>版权部分加上网站名称和链接</div>，网站底部版权部分的权重越来越高了，在版权部分加上网站名称和链接或是强调一些关键词是很有必要的，不要落个头重脚轻的感觉，让搜索引擎感觉很不舒服。
7）HTML优化要富于逻辑，重点明确，层次分明，也是符合SEO精神的。我们甚至可以这样理解HTML优化，其实它就是一篇好的作文，从标题到中心思想，然后是围绕中心展开详细阐述，这里要做到重点突出、层次分明，最后才到结尾，需要点题，做到首尾呼应。
工具
HTML优化工具目前比较理想的是Absolute HTML Compressor，另外，PageSpeed1.6中也引入了HTML压缩功能，不过目前只有四个简单的策略，尚处于实验性阶段。随着大家对前端性能越来越高的关注度，HTML优化及压缩方面也一定会有所发展的。