如何通過HTTP緩存優化您的網站打賞

對于互聯網網站來說,加載速度是很重要的,面對各種資源的緩慢加載,大部分用戶總是討厭等待,以致于直接關掉頁面(當然,如果你的網站內容不是必須或者不是唯一的情況下)。所幸HTTP協議中提供了完善的緩存機制,使我們可以一定程度上優化這種緩慢帶來的負面影響。

什么是緩存?

緩存是一個到處都存在的用空間換時間的例子。通過使用多余的空間,我們能夠獲取更快的速度。用戶在瀏覽網站的時候,瀏覽器能夠在本地保存網站中的圖片或者其他文件的副本,這樣用戶再次訪問該網站的時候,瀏覽器就不用再下載全部的文件,減少了下載量意味著提高了頁面加載的速度。

下面這個圖例說明了瀏覽器和服務器之間如何進行交互。
HTTP_request
緩存的缺點

緩存非常有用,但是也帶來了一定的缺陷。當我們的網站發生了更新的時候,比如說Logo換了,瀏覽器本地仍保存著舊版本的Logo,那么瀏覽器如何來確定使用本地文件還是使用服務器上的新文件?下面來介紹幾種判斷的方法。

緩存方法1:Last-Modified

服務器為了通知瀏覽器當前文件的版本,會發送一個上次修改時間的標簽,例如:

Last-modified: Fri, 25 Dec 2015 08:30:25 GMT

File Contents (could be an image, HTML, CSS, Javascript...)

HTTP-caching-last-modified_1

這樣瀏覽器就知道他收到的這個文件創建時間,在后續的請求中,瀏覽器會按照下面的規則進行驗證:

1、瀏覽器:Hey,我需要logo.png這個文件,如果是在 Fri, 25 Dec 2015 08:00:25 GMT 之后修改過的,請發給我。

2、服務器:(檢查文件的修改時間)

3、服務器:Hey,這個文件在那個時間之后沒有被修改過,你已經有最新的版本了。

4、瀏覽器:太好了,那我就顯示給用戶了。

在這種情況下,服務器僅僅返回了一個304的響應頭,減少了響應的數據量,提高了響應的速度。

緩存方法2: ETag

通常情況下,通過修改時間來比較文件是可行的。但是在一些特殊情況,例如服務器的時鐘發生了錯誤,服務器時鐘進行修改,夏時制DST到來后服務器時間沒有及時更新,這些都會引起通過修改時間比較文件版本的問題。

ETag可以用來解決這種問題。ETag是一個文件的唯一標志符。就像一個哈希或者指紋,每個文件都有一個單獨的標志,只要這個文件發生了改變,這個標志就會發生變化。

服務器返回ETag標簽:

ETag: ecd256d

File Contents (could be an image, HTML, CSS, Javascript...)

接下來的訪問順序如下圖所示:

HTTP_caching_if_none_match

1、瀏覽器:Hey,我需要Logo.png這個文件,有沒有不匹配"ecd256d"這個串的

2、服務器:(檢查ETag...)

3、服務器:Hey,我這里的版本也是"ead145f",你已經是最新的版本了

4、瀏覽器:好,那就可以使用本地緩存了

如同 Last-modified 一樣,ETag 解決了文件版本比較的問題。只不過 ETag 的級別比 Last-Modified 高一些。

緩存方法3:Expires

緩存一個文件,并且與服務器確認版本的方式非常好,但是仍有一個缺點,我們必須連接服務器。每次使用前都進行一次比較,這種方法很安全,但還不是最好的。我們可以使用 Expiration Date 來減少這種請求。

就像我們用牛奶來煮麥片一樣,每次喝之前都要檢查一下牛奶是否安全。但是如果我們知道牛奶的過期時間,我們就可以在過期之前,直接使用而不用再送去檢查。一旦超過了過期時間,我們再去買一份新的回來。服務器返回的時候,會帶上這份數據的過期時間:

Expires: Tue, 31 Dec 2015 08:00:25 GMT

File Contents (could be an image, HTML, CSS, Javascript...)

HTTP_caching_expires

這樣,在過期之前,我們就避免了和服務器之間的連接。瀏覽器只需要自己判斷手中的材料是否過期就可以了,完全不需要增加服務器的負擔。

緩存方法4:Max-age

Expires的方法很好,但是我們每次都得算一個精確的時間。max-age 標簽可以讓我們更加容易的處理過期時間。我們只需要說,這份資料你只能用一個星期就可以了。

Max-age 使用秒來計量,下面是一些常用的單位:

1 days in seconds = 86400

1 week in seconds = 604800

1 month in seconds = 2629000

1 year in seconds = 31536000

額外的標簽

緩存標簽永遠不會停止工作,但是有時候我們需要對已經緩存的內容進行一些控制。

Cache-control: public 表示緩存的版本可以被代理服務器或者其他中間服務器識別。

Cache-control: private 意味著這個文件對不同的用戶是不同的。只有用戶自己的瀏覽器能夠進行緩存,公共的代理服務器不允許緩存。

Cache-control: no-cache 意味著文件的內容不應當被緩存。這在搜索或者翻頁結果中非常有用,因為同樣的URL,對應的內容會發生變化。

注意:有些標簽只是在支持HTTP/1.1的瀏覽器上可用,如果想要了解更多,那么推薦RFC2616以及Cache docs。

文章收集自互聯網。

參考資料:How to Optimize Your Site with HTTP Caching

如何通過HTTP緩存優化您的網站
文章《如何通過HTTP緩存優化您的網站》二維碼
  • 微信打賞
  • 支付寶打賞

已有9條評論

  1. 騙局草

    還記的8年的前的建站麻煩的要死,現在的建站就是傻瓜式的,有套主題或者模板搞定,難就難在后續的推廣,需要長時間的維護,等等,堅持下來的肯定是有所小成的

    2017-08-28 17:29 回復
  2. 嘻嘻不要啊

    配置不好,比較消耗資源,,

    2016-03-18 10:41 回復
  3. 徐小木

    找到好貼不容易,我頂你了,謝了

    2016-01-22 02:53 回復
  4. 跨境電商

    [神馬]

    2016-01-17 11:08 回復
  5. 灰狼

    博客速度太慢了,受不了

    2016-01-14 23:20 回復
  6. 向珊

    [怒吼]

    2016-01-12 13:54 回復
  7. 匿名

    難道不可以直接用插件實現?我就是這樣實現。在WP中。

    2015-12-28 01:31 回復

(必填)

(必填)

(可選)

黑龙江22选5开奖