【編者按】以下這篇文章是由一位名為張黎明的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 來判斷頁面是否在預渲染狀態。