開發人員需知:HTML5性能分析面面觀

發布時間:2017-03-22 17:54 來源:互聯網 當前欄目:網頁設計教程

  以下這篇文章是由一位名為張黎明的IT技術人員所寫,其發表于InfoQ的網頁上。這次他在全文里面從9個不同的方面分析HTML5的性能,還是很值得相應的開發人員閱讀的。

  從性能角度來說,HTML5首先是縮減了HTML文檔,使這件事情變得更簡單。第一,從用戶可讀性上說,原先一大堆東西,像初學者第一次看到這些東 西是看不懂的,而HTML5的聲明方式對用戶來說顯然更友好一些。 第二,文檔編碼的聲明,用HTML5方式的話,就很簡單。很多人問HTML5是什么?我們說可以先用HTML5的方式就是把DOCTYPE先改了,因為目 前很多頁面都還是用傳統的方式。HTML5的方式,本身是兼容IE瀏覽器的,從IE6到IE10都可以,包括高級瀏覽器都支持。所以說擁抱HTML5最簡 單的方式就是把DOCTYPE給改了。

開發人員需知:HTML5性能分析面面觀  電腦高手教程

  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不會去預拉取。

  • 1、
  • 2、
  • 3、
  • 4、
  • 5、
  • 6、
  • 7、
  • 8、
  • 9、
  • 10、
  • 11、
  • 12、
  • 13、
  • 14、
  • 15、
  • 16、
  • 17、
  • 18、
  • 19、
  • 20、
  • 21、
  • 22、
  • 23、
  • 24、
  • 25、
  • 1、
  • 2、
  • 3、
  • 4、
  • 5、
  • 6、
  • 7、
  • 8、
  • 9、
  • 10、
  • 11、
  • 12、
  • 13、
  • 14、
  • 15、
  • 16、
  • 17、
  • 18、
  • 19、
  • 20、
  • 21、
  • 22、
  • 23、
  • 24、
  • 25、