幾乎所有的網站的響應時間都劃在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-awesomeicomoon。只需要在網站中使用字體文件,就能隨心所欲地使用各類圖片,並且可以用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都做的緩存配置,可以充分瀏覽器緩存。