• 您的位置：創(chuàng)新互聯(lián) >> 網(wǎng)站優(yōu)化 >> 網(wǎng)站優(yōu)化基礎(chǔ)知識(shí) >> HTML優(yōu)化

HTML優(yōu)化

• 作者：曾小姐 文章來(lái)源：成都網(wǎng)站建設(shè) 點(diǎn)擊數(shù)：1017 更新時(shí)間：2011-11-05
• 　　在網(wǎng)站制作中，對(duì)javascript和CSS的網(wǎng)站優(yōu)化一直是設(shè)計(jì)師們關(guān)注的焦點(diǎn)，而其相應(yīng)的壓縮優(yōu)化工具也非常豐富，相對(duì)而言對(duì)HTML優(yōu)化的關(guān)注則顯得有些冷淡。小編在Steve Souders的大作《Even Faster Web Sites》中看到非常多有效的前端優(yōu)化方法，例如javascript的加載、CSS選擇符、圖片優(yōu)化、gzip、iframe問(wèn)題等，唯獨(dú)沒(méi)有細(xì)說(shuō)HTML優(yōu)化。在整個(gè)前端的構(gòu)成中，HTML是必不可少的一部分，而且是真正的展示“前端”。雖然與動(dòng)輒十幾K的javascript相比，HTML的大小在整個(gè)頁(yè)面資源中一般不會(huì)占太多的比重，而且還有Gzip，但是事實(shí)表明，大多數(shù)頁(yè)面都有較大的壓縮余地，即使是Gzip過(guò)后仍然能減小可觀(guān)的體積，所以今天小編主要干大家討論HTML優(yōu)化的一些可行和看上去不那么可行的途徑。
  　　對(duì)于各種優(yōu)化途徑，如果一定要我給一個(gè)分類(lèi)的話(huà)，小編會(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è)面是處于同一域名下的話(huà)，則可以使用相對(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é)議頭。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]—>
  　　諸如這樣的語(yǔ)法，只有符合expression的瀏覽器才能識(shí)別其中的內(nèi)容。
  　　(b). CDATA注釋
  　　/**/CDATA本身是XHTML中才需要的，在CDATA中的內(nèi)容不需要對(duì)特殊字符進(jìn)行轉(zhuǎn)義，不過(guò)為了兼容老版本的瀏覽器，需要加上注釋?zhuān)�以免出錯(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)�例如統(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)簽 屬性 默認(rèn)值
  　　style media screen
  　　link media screen
  　　form method get
  　　form
  　　input type text
  　　第二，橙色方法
  　　橙色方法是指那些有違標(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)簽的”/”。（小編提醒：不符合XHTML規(guī)范）
  　　最后，工具
  　　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)慎。
  　　大家有沒(méi)有理解清楚呢？不明白的地方歡迎隨時(shí)咨詢(xún)成都創(chuàng)新互聯(lián)網(wǎng)站建設(shè)，我們將竭誠(chéng)為你服務(wù)哦！
  
• 上一篇文章：如何使你的網(wǎng)站被百度有效收錄和受歡迎
  下一篇文章：網(wǎng)站不被百度收錄的16種原因