如何用顏色區(qū)分HTML優(yōu)化技巧應(yīng)用法則

這篇文章將為大家詳細(xì)講解有關(guān)如何用顏色區(qū)分HTML優(yōu)化技巧應(yīng)用法則，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個(gè)參考，希望大家閱讀完這篇文章后對(duì)相關(guān)知識(shí)有一定的了解。

我們知道在整個(gè)前端的構(gòu)成中，HTML是必不可少的一部分，而且是真正的展示“前端”，所以對(duì)HTML進(jìn)行有效的優(yōu)化還是非常有必要的。

雖然與動(dòng)輒十幾K的Javascript相比，HTML的大小在整個(gè)頁(yè)面資源中一般不會(huì)占太多的比重，而且還有Gzip，但是事實(shí)表明，大多數(shù)頁(yè)面都有較大的壓縮余地，即使是Gzip過(guò)后仍然能減小可觀的體積。

對(duì)于各種優(yōu)化途徑，如果一定要我給一個(gè)分類(lèi)的話，我會(huì)用顏色來(lái)區(qū)分。對(duì)于那些在各種頁(yè)面中都適用而且無(wú)害的方法，我將它們歸為綠色。相對(duì)而言，只有在某些具體的情況下才適用或者有違標(biāo)準(zhǔn)的方法歸為橙色。

綠色方法

1. 使用相對(duì)URL

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

2. 刪除HTTP或HTTPS

絕對(duì)URL都以HTTP或HTTPS等協(xié)議頭開(kāi)始，如果能確定URL的協(xié)議與當(dāng)前頁(yè)面URL的協(xié)議是一致的，或者說(shuō)該URL在多種協(xié)議下均是可用的，則可以考慮刪除這個(gè)協(xié)議頭。

這樣做雖然有些非主流，但事實(shí)證明是可行的，而且也有理論依據(jù)。Nexus One的這個(gè)頁(yè)面中有些資源URL就刪除了協(xié)議頭，雖然并不是出于節(jié)省資源的目的，但至少證明刪除協(xié)議頭是可行的。對(duì)于CSS，如果刪除協(xié)議頭在IE7、IE8下會(huì)造成CSS下載兩次，這個(gè)是需要注意的問(wèn)題。

3. 刪除注釋

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

(a). IE條件注釋

<!--[if expression]> HTML <![endif]&mdash;>

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

(b). CDATA注釋

/*  */

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

(c). 自定義注釋

產(chǎn)品中自定義的一些具有特定功能的注釋?zhuān)缃y(tǒng)計(jì)。

4. 壓縮空白符

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

5. 壓縮inline css & Javascript

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

6. CSS&Javascript盡量外鏈

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

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

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

橙色方法

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

1. 刪除或替換

DOCTYPE對(duì)于頁(yè)面展現(xiàn)非常重要，瀏覽器會(huì)根據(jù)具體的DOCTYPE來(lái)決定如何顯示頁(yè)面，除非你對(duì)刪除DOCTYPE后的頁(yè)面展示十分有把握，否則不要輕易刪除。另外一種可行的方式是采用HTML5中的寫(xiě)法，即，大多數(shù)瀏覽器能夠?qū)⑦@種doctype寫(xiě)法解析為標(biāo)準(zhǔn)或準(zhǔn)標(biāo)準(zhǔn)(Almost Standard)模式，不過(guò)依然會(huì)造成一些問(wèn)題，具體見(jiàn)這里。目前百度、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)簽是允許沒(méi)有閉合標(biāo)簽的，具體的參考此處。（提醒：不符合XHTML規(guī)范）

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

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

總結(jié)：

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

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

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

關(guān)于如何用顏色區(qū)分HTML優(yōu)化技巧應(yīng)用法則就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到。