【編者案】以下這篇文章是由一名名為張拂曉的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 來斷定頁面是不是在預襯著狀況。

　　4.DNS剖析

　　接下來是關於DNS的剖析。偶然候我們登入頁面，對用戶大概點的處所相對而言是比擬難探測到，固然偶然候我們會做一些埋點來探知用戶下一步行動大部門是往裡走。但有些情形下，我們沒有曉得用戶下一步詳細會走到哪個頁面的時刻，然則我們曉得他要走到哪個域。這個時刻，我便可以預剖析DNS。由於現實上，全部頁面的要求進程中央有一個很長的DNS的剖析進程，假如說這個我們提早做瞭，便可以更進一步讓用戶看到這一頁面。

　　以下是Q+壁紙的案例。Q+壁紙是Q+某一個體系體系，起首Q+全部的架構是基於WEB + 客戶端。我們如今看到的就是一個WEB的頁面，固然它表面是一個客戶真個殼，然則它的心是WEB的。全部進程在我們第一次在完成的時刻，由於圖片比擬多，全部的靜態資本是分派到十幾個靜態辦事器上。也就是說，假如我要去拉的時刻，我就要剖析10個DNS，這個時光是相稱耗時的，最慢的時刻大概會耽誤幾秒鐘，這是我們肉眼能感到到的。假如舉行DNS預剖析，由於自己資本我沒有曉得詳細是哪個，全部圖片都是隨機的，以是我們隻能說在DNS預剖析高低工夫，來晉升它的速率。如許的話，從本來大概須要2秒鐘，我就釀成1秒鐘。

　　接下來說Q+中的運用。我們會像QQ內裡一樣，QQ內裡跟Q+都有許多筆墨鏈，就是窗口的左下角有一個筆墨APP信息的推送。這邊是經由過程WEB不時去拉取後端，後端拉取過來然後在前臺表現。然則在某一個時代，實在全部的APP它一共推送的運營信息是牢固的。假如說按某個詳細APP去剖析每一個筆墨鏈對應數組的話，這個時刻長短常大數據。由於這裡一個就也許有到達三四百個字節，從優化的角度說，我們把這些每次拉區過來的存在當地。再存上當地的localStorage，我們是統一域，全部的APP之間的信息都是能夠互相拜訪的。然後就是把全部拉過的ID，就沒有會再從新拉一遍。