DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> WEB網站前端 >> 關於網頁技巧 >> HTML優化的綠色方法和橙色方法
HTML優化的綠色方法和橙色方法
編輯:關於網頁技巧     

在前段領域中,對Javascript和CSS的優化一直是大家關注的焦點,相應的壓縮優化工具也非常豐富,相對而言對HTML優化的關注則顯得有些冷淡。在Steve Souders的大作《Even Faster Web Sites》中談到非常多有效的前端優化方法,例如Javascript的加載、CSS選擇符、圖片優化、gzip、iframe問題等,唯獨沒有細說HTML優化。在整個前端的構成中,HTML是必不可少的一部分,而且是真正的展示“前端”。雖然與動辄十幾K的Javascript相比,HTML的大小在整個頁面資源中一般不會占太多的比重,而且還有Gzip,但是事實表明,大多數頁面都有較大的壓縮余地,即使是Gzip過後仍然能減小可觀的體積,這一事實在後續的文章中會給出,本文主要討論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規范)

工具

HTML優化工具目前比較理想的是Absolute HTML Compressor,另外,PageSpeed1.6中也引入了HTML壓縮功能,不過目前只有四個簡單的策略,尚處於實驗性階段。隨著大家對前端性能越來越高的關注度,HTML優化及壓縮方面也一定會有所發展的。

總結

1. HTML優化及壓縮的發展滯後於前端其他資源,不過目前也已經引起大家越來越多的關注。

2. 綠色規則中的很多都是在寫碼過程中就可以注意和遵循的,如果能把這個優化融入到編碼中,效果應該更好。

3. 橙色規則由於違背某些規范,只適用於某些特定的頁面,使用時務必謹慎。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved