網站性能優化-減少HTTP請求數量

幾乎所有的網站的響應時間都劃在HTTP的請求上，尤其是資源文件的請求。

在HTTP1.1中已經支持了永久連接 Keep-alive，就是在一個TPC/IP連接中，可以連需剁次發起HTTP的請求。之後採用”管線化”技術，做到同時並行多個HTTP請求，而不需要一個接一個地等待響應，Chrome目前支持在一個域名下，同時可以有6個併行的HTTP請求。儘管如此，為了進一步提高網站性能，還是需要知道如何有效的減少HTTP的請求量。

接下來我們將介紹幾個常用的減少HTTP請求量的方式。

1. 圖片：雪碧圖、 Icon-font 、data:url

雪碧圖

優化圖片有很多種方式，除了壓縮圖片之外，最常見的就是雪碧圖(Image sprites)， 這是一種CSS圖像合成技術 ，是把多張小圖合併成一張圖，使用CSS中的background-position來調整圖片位置。這是比較廣泛適用的方式，但使用雪碧圖也有缺點，如果一張小圖需要N個顏色，那麼就必須做N個不同顏色的小圖，在合併到大圖裡，這樣反而多出了許多時間。

Icon-font

如果需要大小統一並且有自定義顏色的圖片，那麼，就可以使用Icon-font(圖標字體文件)。常用的像是 font-awesome、icomoon。只需要在網站中使用字體文件，就能隨心所欲地使用各類圖片，並且可以用CSS來改變圖標顏色。

data:url

data:url模式可以在直接頁面中渲染圖片但無需額外的HTTP請求，格式如下：

<img scr="data:image/jpg;base64, xxx">

缺點就是，如果同一張圖在多個頁面被使用，就無法利用瀏覽器緩存，為了解決這個問題，既可以換個方式，把圖片資料放到CSS中定義，例如：

.image {
   background-image: url(data:image/jpg;base64,xxx);
}

這樣可以利用瀏覽器緩存CSS，又可以避免圖片而外請求。

但使用data:url有個非常大的缺點，就是在行動裝置端開啟網頁時，使用data:url的性能非常不好，所以只建議在桌面版的頁面中使用。

2. 合併JavaScript和CSS

合併Javascript 跟 CSS是很常見的做法，使用項目構件工具，例如gulp、grunt、webpack等等，都可以做到Javascript 、CSS的壓縮、合併。但是，合併後的大小如何，則需要斟酌。如果只是為了減少HTTP的請求，而下載一個巨大的Javascript或是CSS，反而會增加網站的渲染時間，那麼頁面會無法顯現或是卡頓的現象。

3. 充分利用瀏覽器緩存

當圖片或是Script、CSS內容比較固定，不會經常修改，那麼，就可以盡可能地利用緩存技術，減少HTTP的請求次數或文件下載次數。

命中瀏覽器緩存分為兩類： 協商緩存(Last-modified ，Etag )和徹底緩存(cache-control，Expires)。

• 徹底緩存：不會發起HTTP請求，直接從瀏覽器緩存中讀取文件。
  • HTTP 1.0中，使用Expires頭指定資源過期時間；
  • HTTP 1.1中，使用Cache-Control: max-age指定資源被緩存多久；
• 協商緩存：向Sever發起HTTP請求，如果資源文件並未更新，response響應碼即為304，隨後從瀏覽器緩存中下載該文件，並不會直接從Sever下載。
  • HTTP 1.0中，採用Last-Modified(response header)和If-Modified-Since(request header)來指定資源過期時間；
  • HTTP 1.1中，採用E-Tag(response/request header)和If-None-Match來決定該資源是否過期；

那麼如何配置瀏覽器緩存呢？因為大多是後台資源Sever控制。例如，通常我們建議將共有圖片、第三方Javascript插件庫或CSS放到CDN(內容傳遞網路)上，因為CDN的分布是特可以加快資源文件的下載速度，而且，一般CND Sever都做的緩存配置，可以充分瀏覽器緩存。