高性能網站建設指南 讀書筆記（一）

這本書的緒言講得很好，對於網站來講，頁面從發送請求到看到頁面，只有10%~20%的時間是花在Web服務器獲取HTML文檔而且傳輸到瀏覽器的，剩餘的80%~90%的工做都是前端部分來作的，做爲一個前端開發人員，與其但願後臺提高效率，不如本身經過一些方法來提高前端的效率。做者說，將這本書的14條規則合理的運用在網站上，能夠節省25%甚至更高的時間！

規則一 減小HTTP請求

性能黃金法則：最終用戶響應時間10%~20%~花費在接受所請求的html文檔上，而其他80%~90%的時間是花費在HTML文檔所引用的其餘資源（圖片、腳本、樣式表、Flash等）進行的HTTP請求上，

減小HTTP請求的數量能夠有效的減小請求過多資源花費的時間從而提高性能。

• 圖片地圖

  這種方法可能很古老了，現今的瀏覽器或者網站可能不多用了，能夠去書上看看demo

• CSS Sprites
  CSS Sprites能夠將多幅圖片拼接成一幅圖片，從而減小請求數量來提高性能。可是CSS Sprites也有缺點，那就是都不適合大容量圖片，適合小size的多張圖片合併。

  其實雪碧圖在http1.1如下的版本用處是很是大的，在 HTTP/1.1 協議中 「瀏覽器客戶端在同一時間，針對同一域名下的請求有必定數量限制。超過限制數目的請求會被阻塞」。因此，不少張圖片同時請求，可能須要分批次請求不少次，雪碧圖很好的解決了這個問題，而HTTP/2.0採用了多路複用，取消了網絡請求數量這一塊的限制。
  
  HTTP/1.1:
  
  HTTP/2.0:
  
  從上面兩張圖能夠看出，HTTP/1的請求次數是有限制的，大概同義詞只能夠發送6個請求左右；而在HTTP/2下，幾乎全部的請求是同時發出的，大大提升了性能。

• 內聯圖片

  優勢：使用data:URL的形式能夠在頁面中使用圖片而無需額外的HTTP請求。
  缺點：data:URL形式存在兼容性問題，如低版本的IE瀏覽器以及過大的圖片進行base64編碼的同時，其data：URL的代碼也很是大，從而雖然節省了HTTP請求，可是加大了HTML文檔的容量。

• 合併腳本和樣式表
  每一個頁面都會額外引用腳本和樣式表，不然就會使用內聯腳本和樣式表。對於開發和維護的角度來講，是推薦使用引用樣式表的這種形式的，可是每個引用又會多一次HTTP請求，因此，合理的合併腳本以及樣式表，能夠減小HTTP請求的次數並縮短最終用戶響應時間。