武林網(www.vevb.com)文章簡介:很多人問HTML5是什麼?我們說可以先用HTML5的方式就是把DOCTYPE先改了,因為目前很多頁面都還是用傳統的方式。 HTML5的方式,本身是兼容IE瀏覽器的,從IE6到IE10都可以,包括高級瀏覽器都支持。
【編者按】以下這篇文章是由一位名為張黎明的IT技術人員所寫,其發表於InfoQ的網頁上。這次他在全文裡面從9個不同的方面分析HTML5的性能,還是很值得相應的開發人員閱讀的。
從性能角度來說,HTML5首先是縮減了HTML文檔,使這件事情變得更簡單。第一,從用戶可讀性上說,原先一大堆東西,像初學者第一次看到這些東西是看不懂的,而HTML5的聲明方式對用戶來說顯然更友好一些。 第二,文檔編碼的聲明,用HTML5方式的話,就很簡單。很多人問HTML5是什麼?我們說可以先用HTML5的方式就是把DOCTYPE先改了,因為目前很多頁面都還是用傳統的方式。 HTML5的方式,本身是兼容IE瀏覽器的,從IE6到IE10都可以,包括高級瀏覽器都支持。所以說擁抱HTML5最簡單的方式就是把DOCTYPE給改了。
1.更簡潔的標籤
接下來可能並不是一件很常見的事情,但是卻是我比較推崇的,使用更簡潔的標籤方式。 HTML5從這個名字大家可以聽出,它是從HTML4繼承過來的。 HTML4裡面有嚴格模式跟過渡模式,HTML5是支持這種過渡模式的,就是你可以不把一些標籤閉合。但是,我並不推薦所有的標籤,比方說BODY標籤的不閉合,這種我們不推薦。但是像P標籤最常用的,還有列表標籤LI。為什麼這樣說?首先從視覺的角度來說,這樣的方式更簡潔一點。然後關鍵的是在文檔傳輸過程中,內容會更少。
HTML5標籤屬性的聲明支持三種方式:單括號、雙括號和不加括號。為了減少文檔大小,我是選擇不加雙引號的方式或單引號的方式。但是要注意,假設是類屬性的聲明,因屬性可能包括多個類,多個類的時候則必須用括號括起來。在這方面,給大家看一下谷歌的一個實踐。谷歌自己有一個頁面完全實踐了上面的東西,文檔的大小減少了20%,使HTML文檔的傳輸減少了20%。如果把整個都實踐起來,可以達到5%—20%之間的減少。這是第一步,縮減HTML文檔的大小。
2.圖片優化
接下來是關於圖片的優化,圖片永遠是又愛又恨的元素。因為當圖片多的時候,會嚴重拖垮整個頁面的加載速度。關於圖片的優化方式,《高性能網站》書中已有很多介紹,總結起來主要有三點:使用精靈圖、優化圖片的大小,使用DATA URI,具體這裡就不細說了。
圖片優化的另一個思路是:no-image。拋棄圖片,擁抱CSS3。原先需要設置一張圓角效果的圖片,現在使用CSS3中的border-radius;原先需要設置陰影效果的圖片,現在使用CSS3中的box-shadow;原先需要設置漸變的背景圖片,現在使用CSS3中的gradient。
3.預取
接下來講Prefetching,預取,是優化的另一個思路。我們現在優化的思路無非就是少。很多都是從少的角度,比方說前面把文檔大小減少,把圖片的大小減少。很多張的圖片變成一張精靈圖,都是為了把發送請求的數量減少。預取的話,是另一種思路,提早加載好資源,用戶去點的時候,實際上已經加載好,那肯定是更快了。
預取,一共有兩部分:一部分是資源的預取,還有一部分是DNS的預解析。
資源預加載有幾個點需要注意:
預加載只是在瀏覽器空閒的時候才會去拉,但不保證一定會去拉,這是很重要的一點。因為本身瀏覽器有一個全局的監聽器,這是內部的一個接口,當瀏覽氣空閒的時候,它會去執行瀏覽器空閒的時候應該做事情,但是這個空閒的回調不一定被觸發,所以說並不保證一定會執行預加載。
Chrome不支持HTTPS資源的預加載,像Alipay是HTTPS的頁面,Chrome不會去預拉取。
一個預拉取的頁面雖存在後不可見,實際上它是在正常解析。假如說我預拉取登陸頁面,登陸頁面有很多資源,比方說有圖片,有CSS文件,JS文件。它是從上往下正常的會被解析,解析的過程中,這個頁面沒有顯現,但是它實際上是存在的。在HTML5裡面,可通過document.visibilityState得到當前頁面狀態,通常頁面有兩種狀態,可見與不可見,但是現在有一個新的狀態,叫做預渲染的狀態。可以直接通過document.visibilityState 是否等於prerender 來判斷頁面是否在預渲染狀態。