瀏覽器的緩存機制小結

01-24

本文來自於知乎我要7西瓜的分享

---------

瀏覽器緩存是前端開發中不可避免的問題，對於web應用來說，它是提升頁面性能同時減少伺服器壓力的利器。本文將簡單地描述總結下瀏覽器緩存的知識和應用，希望對自己和大家都有所幫助。

--------

一、瀏覽器緩存類型

1.強緩存：不會向伺服器發送請求，直接從緩存中讀取資源，在chrome控制台的network選項中可以看到該請求返回200的狀態碼，並且size顯示from disk cache或from memory cache；

2.協商緩存：向伺服器發送請求，伺服器會根據這個請求的request header的一些參數來判斷是否命中協商緩存，如果命中，則返回304狀態碼並帶上新的response header通知瀏覽器從緩存中讀取資源；

兩者的共同點是，都是從客戶端緩存中讀取資源；區別是強緩存不會發請求，協商緩存會發請求。

--------

二、緩存有關的header

強緩存

Expires：response header里的過期時間，瀏覽器再次載入資源時，如果在這個過期時間內，則命中強緩存。

Cache-Control：當值設為max-age=300時，則代表在這個請求正確返回時間（瀏覽器也會記錄下來）的5分鐘內再次載入資源，就會命中強緩存。

Expires和Cache-Control:max-age=*** 的作用是差不多的，區別就在於 Expires 是http1.0的產物，Cache-Control是http1.1的產物，兩者同時存在的話，Cache-Control優先順序高於Expires；在某些不支持HTTP1.1的環境下，Expires就會發揮用處。所以Expires其實是過時的產物，現階段它的存在只是一種兼容性的寫法

（編輯補充：Expires和Cache-Control的區別還有一個：Expires是一個具體的伺服器時間，這就導致一個問題，如果客戶端時間和伺服器時間相差較大，緩存命中與否就不是開發者所期望的。Cache-Control是一個時間段，控制就比較容易。）

協商緩存

ETag和If-None-Match：這兩個要一起說。Etag是上一次載入資源時，伺服器返回的response header，是對該資源的一種唯一標識，只要資源有變化，Etag就會重新生成。瀏覽器在下一次載入資源向伺服器發送請求時，會將上一次返回的Etag值放到request header里的If-None-Match里，伺服器接受到If-None-Match的值後，會拿來跟該資源文件的Etag值做比較，如果相同，則表示資源文件沒有發生改變，命中協商緩存。

Last-Modified和If-Modified-Since：這兩個也要一起說。Last-Modified是該資源文件最後一次更改時間，伺服器會在response header里返回，同時瀏覽器會將這個值保存起來，在下一次發送請求時，放到request header里的If-Modified-Since里，伺服器在接收到後也會做比對，如果相同則命中協商緩存。

ETag和Last-Modified的作用和用法也是差不多，說一說他們的區別。
首先在精確度上，Etag要優於Last-Modified。Last-Modified的時間單位是秒，如果某個文件在1秒內改變了多次，那麼他們的Last-Modified其實並沒有體現出來修改，但是Etag每次都會改變確保了精度；如果是負載均衡的伺服器，各個伺服器生成的Last-Modified也有可能不一致。

第二在性能上，Etag要遜於Last-Modified，畢竟Last-Modified只需要記錄時間，而Etag需要伺服器通過演算法來計算出一個hash值。
第三在優先順序上，伺服器校驗優先考慮Etag。

--------

三、瀏覽器緩存過程

瀏覽器第一次載入資源，伺服器返回200，瀏覽器將資源文件從伺服器上請求下載下來，並把response header及該請求的返回時間一併緩存；
下一次載入資源時，先比較當前時間和上一次返回200時的時間差，如果沒有超過cache-control設置的max-age，則沒有過期，命中強緩存，不發請求直接從本地緩存讀取該文件（如果瀏覽器不支持HTTP1.1，則用expires判斷是否過期）；如果時間過期，則向伺服器發送header帶有If-None-Match和If-Modified-Since的請求；
伺服器收到請求後，優先根據Etag的值判斷被請求的文件有沒有做修改，Etag值一致則沒有修改，命中協商緩存，返回304；如果不一致則有改動，直接返回新的資源文件帶上新的Etag值並返回200；
如果伺服器收到的請求沒有Etag值，則將If-Modified-Since和被請求文件的最後修改時間做比對，一致則命中協商緩存，返回304；不一致則返回新的last-modified和文件並返回200；

--------

三、用戶行為對瀏覽器緩存的控制

地址欄訪問，鏈接跳轉是正常用戶行為，將會觸發瀏覽器緩存機制；
F5刷新，瀏覽器會設置max-age=0，跳過強緩存判斷，會進行協商緩存判斷；
ctrl+F5刷新，跳過強緩存和協商緩存，直接從伺服器拉取資源。

原文鏈接：瀏覽器的緩存機制小結 · Issue #1 · chenjiangsong/blog