瀏覽器緩存控制

web資源在瀏覽器端的緩存通常是通過相應頭和請求頭裏的相關字段來控制的,包括 etag、last-modified、expires,cache-control,這幾個字段出現的順序有時間先後,作用也有所不用。

1. etag
etag類似於用MD5給文件進行電子簽名,它以文件的時間戳、文件內容等作爲參數生成一小段唯一的標識字符串,每次對文件的修改都會在etag上體現出來。響應頭裏的etag會被瀏覽器保存下來,在再次發起請求時,其作爲請求頭中if-none-match的值返回給服務器,進行比對,決定返回304還是200.如果etag沒發生變化,則返回一個body爲空的響應,也就是304。

   ETag:"107-554cb4803cf6c"

2. last-modified
作用於etag類似,但是其值是以秒爲單位的時間,既文件最後一次被修改的時間。請求頭中與last-modified相對應的字段爲if-modified-since。

 Last-Modified:Fri, 21 Jul 2017 08:30:37 GMT

3.expires與cache-control

Expires:Mon, 24 Jul 2017 07:00:01 GMT
Cache-Control:max-age=604800

expires和cache-control都可以控制文件的過期時間。不同的是:expires的值是一個時間的絕對值,然而用戶瀏覽器的時間、服務器時間、多臺負載均衡服務器之間的時間通常是不太一致的。cache-control的是值是一個時間的相對值,既一段時間,超出這段時間範圍既失效。

4.etag、last-modified、expires,cache-control之間的關係
etag和last-modified 都是服務器端產生,在瀏覽器端保存,最後返回到服務器端驗證。雖然通過這種方式能夠減輕服務器的壓力,解決一些請求資源時的性能問題。但是細細看來,還是存在一些浪費:每個都要去帶上條件請求服務器來看資源是不是最新的,大多情況下是最新的情況下每次都在做無意義的驗證,於是expirescache-control 派上了用場。expires、cache-control都是在服務器端產生,在瀏覽器端保存,同時也是在瀏覽器端驗證的。如果文件還在有效期內,則直接採用緩存,不需要再向服務器驗證文件的有效性。

如果比較粗的說先後順序應該是這樣:
1. Cache-Control —— 請求服務器之前
2. Expires —— 請求服務器之前
3. If-None-Match (Etag) —— 請求服務器
4. If-Modified-Since (Last-Modified) —— 請求服務器

如果同時有 etag 和 last-modified 存在,在發送請求的時候會一次性的發送給服務器,沒有優先級,服務器會比較這兩個信息(在具體實現上,大多數做法針對這種情況只會比對 etag)。服務器在輸出上,如果輸出了 etag 就沒有必要再輸出 last-modified(實際上大多數情況會都輸出)
如果同時有 expires 和cache-control 存在,一般採用cache-control的過期時間。

最後完事後的討論 – 各種途徑的訪問
瀏覽器輸入 url 之後敲下回車,刷新 F5 與強制刷新(Ctrl + F5),又有什麼區別?

實際上瀏覽器輸入 url 之後敲下回車就是先看本地 cache-control、expires 的情況,刷新(F5)就是忽略先看本地 cache-control、expires 的情況,帶上條件 If-None-Match、If-Modified-Since,強制刷新(Ctrl + F5)就是不帶條件的訪問。

值得注意的是,如果是 瀏覽器輸入 url 之後敲下回車 你在 network 裏面看到的狀態往往是 200,但是大小是 0。這是因爲這個 200 是上次訪問資源返回的狀態碼。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章