幾乎所有的網站的響應時間都劃在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
指定資源被緩存多久;
- HTTP 1.0中,使用
- 協商緩存:向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
來決定該資源是否過期;
- HTTP 1.0中,採用
那麼如何配置瀏覽器緩存呢?因為大多是後台資源Sever控制。例如,通常我們建議將共有圖片、第三方Javascript插件庫或CSS放到CDN(內容傳遞網路)上,因為CDN的分布是特可以加快資源文件的下載速度,而且,一般CND Sever都做的緩存配置,可以充分瀏覽器緩存。
0 Comments