武林網(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 來判斷頁面是否在預渲染狀態。