常方法HTML標(biāo)簽優(yōu)化一

1. 使用相對(duì)URL

對(duì)于頁面中的各種URL，例如鏈接、外鏈CSS的href、外鏈Javascript的src、圖片src、iframe src等，如果能夠確定它們與當(dāng)前頁面是處于同一域名下的話，則可以使用相對(duì)URL，這樣每一個(gè)URL都能夠節(jié)省至少一個(gè)域名的長度。

2. 刪除HTTP或HTTPS

絕對(duì)URL都以HTTP或HTTPS等協(xié)議頭開始，如果能確定URL的協(xié)議與當(dāng)前頁面URL的協(xié)議是一致的，或者說該URL在多種協(xié)議下均是可用的，則可以考慮刪除這個(gè)協(xié)議頭。這樣做雖然有些非主流，但事實(shí)證明是可行的，而且也有理論依據(jù)(見http://www.ietf.org/rfc/rfc2396.txt 第5.2節(jié)描述)。Nexus One的這個(gè)頁面中有些資源URL就刪除了協(xié)議頭，雖然并不是出于節(jié)省資源的目的，但至少證明刪除協(xié)議頭是可行的。

對(duì)于CSS，如果刪除協(xié)議頭在IE7、IE8下會(huì)造成CSS下載兩次，這個(gè)是需要注意的問題。

3. 刪除注釋

與CSS、Javascript一樣，也可以通過刪除HTML中的注釋來實(shí)現(xiàn)優(yōu)化。然而，這一點(diǎn)對(duì)于HTML來說卻要復(fù)雜一些，因?yàn)樵贖TML中存在某些特殊作用的注釋是不能刪除的。

(a). IE條件注釋

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

諸如這樣的語法，只有符合expression的瀏覽器才能識(shí)別其中的內(nèi)容。

(b). CDATA注釋

/*  */

CDATA本身是XHTML中才需要的，在CDATA中的內(nèi)容不需要對(duì)特殊字符進(jìn)行轉(zhuǎn)義，不過為了兼容老版本的瀏覽器，需要加上注釋，以免出錯(cuò)。不過，對(duì)于這個(gè)注釋，如果你的頁面并沒有真正的使用XHTML標(biāo)準(zhǔn)則可以大膽的刪除掉。使用XHTML標(biāo)準(zhǔn)不是簡單的聲明DTD就可以辦到的，除此之外還需要服務(wù)器能夠派application/xhtml+xml這樣的內(nèi)容格式，另外還需要瀏覽器支持，目前IE并不支持XHTML格式。因此，目前你的頁面可能是按照XHTML規(guī)范來寫的，也能通過HTML驗(yàn)證，但想要兼容IE則一定還是以HTML方式來展示的。這樣一來，很多為了遵循標(biāo)準(zhǔn)而增加的內(nèi)容則可以刪除，具體的在后文的橙色部分詳述。

(c). 自定義注釋

產(chǎn)品中自定義的一些具有特定功能的注釋，例如統(tǒng)計(jì)。

4. 壓縮空白符

在HTML中的大多數(shù)標(biāo)簽中，多個(gè)空白符都會(huì)被壓縮成一個(gè)來顯示，于是可以通過刪除多余的空白符來減小HTML體積。不過需要注意的是并不是所有的空白符都可以這樣做，例如pre、textarea中的空白符是按原樣顯示的，標(biāo)簽屬性中的屬性值也是按原樣顯示的，例如title、value等。

5. 壓縮inline css & Javascript

不管inline還是external，都需要壓縮，這是減小體積的最直接的方式。

6. CSS&Javascript盡量外鏈

外鏈CSS和Javascript，不僅僅是減小HTML本身的體積，而且還可以充分利用瀏覽器的緩存機(jī)制，所以當(dāng)CSS、Javascript的代碼量超過一定體積時(shí)，盡量外鏈。除此之外，盡量避免在頁面中使用onmouseover=”xxxx”的方式來注冊(cè)事件，既不利于維護(hù)也容易產(chǎn)生不必要的冗余代碼。

7. 刪除元素默認(rèn)屬性

在HTML規(guī)范中，很多HTML元素的屬性是有默認(rèn)值的，對(duì)于這些默認(rèn)值可以抹去不寫，下面是不完全統(tǒng)計(jì)。

常方法HTML標(biāo)簽優(yōu)化二

常方法HTML標(biāo)簽優(yōu)化二是指那些有違標(biāo)準(zhǔn)，或者會(huì)導(dǎo)致頁面出現(xiàn)無法預(yù)料的問題的一類方法，算是一類非常規(guī)的方法，因此也僅僅適用于一些非常規(guī)的頁面，例如搜索引擎首頁。

1. 刪除或替換

DOCTYPE對(duì)于頁面展現(xiàn)非常重要，瀏覽器會(huì)根據(jù)具體的DOCTYPE來決定如何顯示頁面，除非你對(duì)刪除DOCTYPE后的頁面展示十分有把握，否則不要輕易刪除。另外一種可行的方式是采用HTML5中的寫法，即，大多數(shù)瀏覽器能夠?qū)⑦@種doctype寫法解析為標(biāo)準(zhǔn)或準(zhǔn)標(biāo)準(zhǔn)(Almost Standard)模式，不過依然會(huì)造成一些問題，具體見這里。目前百度、Google都是這么做的。

2. 刪除標(biāo)簽屬性值的引號(hào)

引號(hào)不是必須的，刪之。此處也需要考慮一些特殊情況，例如屬性值中包含引號(hào)等。

（提醒：不符合XHTML規(guī)范）

3. 省略某些屬性值

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

（提醒：不符合XHTML規(guī)范）

4. 刪除可選的閉合標(biāo)簽

例如body、p、tr等標(biāo)簽是允許沒有閉合標(biāo)簽的，具體的參考此處。

（提醒：不符合XHTML規(guī)范）

5. 刪除自動(dòng)閉合標(biāo)簽的”/”

（提醒：不符合XHTML規(guī)范）

工具

HTML優(yōu)化工具目前比較理想的是Absolute HTML Compressor，另外，PageSpeed1.6中也引入了HTML壓縮功能，不過目前只有四個(gè)簡單的策略，尚處于實(shí)驗(yàn)性階段。隨著大家對(duì)前端性能越來越高的關(guān)注度，HTML優(yōu)化及壓縮方面也一定會(huì)有所發(fā)展的。

總結(jié)

1. HTML優(yōu)化及壓縮的發(fā)展滯后于前端其他資源，不過目前也已經(jīng)引起大家越來越多的關(guān)注。

2. 綠色規(guī)則中的很多都是在寫碼過程中就可以注意和遵循的，如果能把這個(gè)優(yōu)化融入到編碼中，效果應(yīng)該更好。

3. 橙色規(guī)則由于違背某些規(guī)范，只適用于某些特定的頁面，使用時(shí)務(wù)必謹(jǐn)慎。