在前段領域中，對Javascript和CSS的優(yōu)化一直是大家關注的焦點，相應的壓縮優(yōu)化工具也非常豐富，相對而言對HTML優(yōu)化的關注則顯得有
些冷淡。在Steve
Souders的大作《Even Faster Web
Sites》中談到非常多有效的前端優(yōu)化方法，例如Javascript的加載、CSS選擇符、圖片優(yōu)化、gzip、iframe問題等，唯獨沒有細說
HTML優(yōu)化。在整個前端的構成中，HTML是必不可少的一部分，而且是真正的展示“前端”。雖然與動輒十幾K的Javascript相比，HTML的大
小在整個頁面資源中一般不會占太多的比重，而且還有Gzip，但是事實表明，大多數(shù)頁面都有較大的壓縮余地，即使是Gzip過后仍然能減小可觀的體積，這
一事實在后續(xù)的文章中會給出，本文主要討論HTML優(yōu)化的一些可行和看上去不那么可行的途徑。
對于各種優(yōu)化途徑，如果一定要我給一個分類的話，我會用顏色來區(qū)分。對于那些在各種頁面中都適用而且無害的方法，我將它們歸為綠色。相對而言，只有在某些具體的情況下才適用
或者有違標準的方法歸為橙色。
綠色方法
1. 使用相對URL
對于頁面中的各種URL，例如鏈接、外鏈CSS的href、外鏈Javascript的src、圖片src、iframe
src等，如果能夠確定它們與當前頁面是處于同一域名下的話，則可以使用相對URL，這樣每一個URL都能夠節(jié)省至少一個域名的長度。
2. 刪除HTTP或HTTPS
絕對URL都以HTTP或HTTPS等協(xié)議頭開始，如果能確定URL的協(xié)議與當前頁面URL的協(xié)議是一致的，或者說該URL在多種協(xié)議下均是可用
的，則可以考慮刪除這個協(xié)議頭。這樣做雖然有些非主流，但事實證明是可行的，而且也有理論依據(jù)(見http://www.ietf.org/rfc/rfc2396.txt
第5.2節(jié)描述)。Nexus
One的這個頁面中有些資源URL就刪除了協(xié)議頭，雖然并不是出于節(jié)省資源的目的，但至少證明刪除協(xié)議頭是可行的。
對于CSS，如果刪除協(xié)議頭在IE7、IE8下會造成CSS下載兩次，這個是需要注意的問題。
3. 刪除注釋
與CSS、Javascript一樣，也可以通過刪除HTML中的注釋來實現(xiàn)優(yōu)化。然而，這一點對于HTML來說卻要復雜一些，因為在HTML中存
在某些特殊作用的注釋是不能刪除的。
(a). IE條件注釋
<!--[if expression]> HTML <![endif]—>
諸如這樣的語法，只有符合expression的瀏覽器才能識別其中的內(nèi)容。
(b). CDATA注釋
/* */
CDATA本身是XHTML中才需要的，在CDATA中的內(nèi)容不需要對特殊字符進行轉義，不過為了兼容老版本的瀏覽器，需要加上注釋，以免出錯。不
過，對于這個注釋，如果你的頁面并沒有真正的使用XHTML標準則可以大膽的刪除掉。使用XHTML標準不是簡單的聲明DTD就可以辦到的，除此之外還需
要服務器能夠派application/xhtml+xml這樣的內(nèi)容格式，另外還需要瀏覽器支持，目前IE并不支持XHTML格式。因此，目前你的頁面
可能是按照XHTML規(guī)范來寫的，也能通過HTML驗證，但想要兼容IE則一定還是以HTML方式來展示的。這樣一來，很多為了遵循標準而增加的內(nèi)容則可
以刪除，具體的在后文的橙色部分詳述。
(c). 自定義注釋
產(chǎn)品中自定義的一些具有特定功能的注釋，例如統(tǒng)計。
4. 壓縮空白符
在HTML中的大多數(shù)標簽中，多個空白符都會被壓縮成一個來顯示，于是可以通過刪除多余的空白符來減小HTML體積。不過需要注意的是并不是所有的
空白符都可以這樣做，例如pre、textarea中的空白符是按原樣顯示的，標簽屬性中的屬性值也是按原樣顯示的，例如title、value等。
5. 壓縮inline css & Javascript
不管inline還是external，都需要壓縮，這是減小體積的最直接的方式。
6. CSS&Javascript盡量外鏈
外鏈CSS和Javascript，不僅僅是減小HTML本身的體積，而且還可以充分利用瀏覽器的緩存機制，所以當CSS、Javascript的
代碼量超過一定體積時，盡量外鏈。除此之外，盡量避免在頁面中使用onmouseover=”xxxx”的
方式來注冊事件，既不利于維護也容易產(chǎn)生不必要的冗余代碼。
7. 刪除元素默認屬性
在HTML規(guī)范中，
很多HTML元素的屬性是有默認值的，對于這些默認值可以抹去不寫，下面是不完全統(tǒng)計。
| 標簽 |
屬性 |
默認值 |
| style |
media |
screen |
| link |
media |
screen |
| form |
method |
get |
| form |
| input |
type |
text |
橙色方法
橙色方法是指那些有違標準，或者會導致頁面出現(xiàn)無法預料的問題的一類方法，算是一類非常規(guī)的方法，因此也僅僅適用于一些非常規(guī)的頁面，例如搜索引擎
首頁。
1. 刪除或替換
DOCTYPE對于頁面展現(xiàn)非常重要，瀏覽器會根據(jù)具體的DOCTYPE來決定如何顯示頁面，
除非你對刪除DOCTYPE后的頁面展示十分有把握，否則不要輕易刪除。另外一種可行的方式是采用HTML5中的寫法，即，大多數(shù)瀏覽器能夠將這種doctype寫法解析為標準或準標準(Almost
Standard)模式，不過依然會造成一些問題，具體見這里。目前百
度、Google都是這么做的。
2. 刪除標簽屬性值的引號
引號不是必須的，刪之。此處也需要考慮一些特殊情況，例如屬性值中包含引號等。
（提醒：不符合XHTML規(guī)范）
3. 省略某些屬性值
例如disabled、checked、multiple等的值都可以省略。
（提醒：不符合XHTML規(guī)范）
4. 刪除可選的閉合標簽
例如body、p、tr等標簽是允許沒有閉合標簽的，具體的參考此處。
（提醒：不符合XHTML規(guī)范）
5. 刪除自動閉合標簽的”/”
（提醒：不符合XHTML規(guī)范）
工具
HTML優(yōu)化工具目前比較理想的是Absolute HTML
Compressor，另外，PageSpeed1.6中也引入了HTML壓縮功能，不過目前只有四個簡單的策略，尚處于實驗性階段。隨著大家對前端性能越來越高的關注度，HTML優(yōu)化及壓縮方面也一定會有所
發(fā)展的。
總結
1. HTML優(yōu)化及壓縮的發(fā)展滯后于前端其他資源，不過目前也已經(jīng)引起大家越來越多的關注。
2. 綠色規(guī)則中的很多都是在寫碼過程中就可以注意和遵循的，如果能把這個優(yōu)化融入到編碼中，效果應該更好。
3. 橙色規(guī)則由于違背某些規(guī)范，只適用于某些特定的頁面，使用時務必謹慎。
參考資料