前端緩存之http緩存

瀏覽器緩存

一、瀏覽器第一次打開一個網頁獲取資源後，根據返回的header（響應頭）信息來告訴如何緩存資源。

二、瀏覽器後續請求
三、瀏覽器在請求某一資源時，會先獲取該資源緩存的header信息，判斷是否命中強緩存（cache-control和expires信息），若命中直接從緩存中獲取資源信息，包括緩存header信息，本次請求不會與服務器進行通訊，此時返回的狀態碼爲200
四、若是沒有命中強緩存，瀏覽器會發送請求到服務器，請求會攜帶第一次返回的有關緩存的header字段信息（Last-Modified/If-Modified-Since 和 etag/If-None-Match）
五、由服務器根據header信息來對比結果是否協商緩存命中。若命中，則服務返回新的響應頭header信息更新緩存中的對應header信息，和304狀態碼，可是不會返回資源內容，它會告知瀏覽器能夠直接從緩存獲取；不然返回最新的資源內容。

// 協商緩存
// 第一次返回的響應頭
Last-Modified: Mon, 02 Jul 2018 08:21:56 GMT
etag: "20e340c70bd7c739e5e633b5c0ee705a"

// 若是強緩存失效，則請求的時候，瀏覽器會帶上第一次響應頭的Last-Modified 和 etag的值得

If-Modified-Since: Mon, 02 Jul 2018 08:21:56 GMT  // 上次返回的Last-Modified的值
If-None-Match： "20e340c70bd7c739e5e633b5c0ee705a" // 上次返回的etag的值

流程圖以下：

強緩存與協商緩存的區別：
緩存|獲取資源形式|狀態碼|發送請求到服務器
---|:--:|---|--|
強緩存|從緩存取|200（from cache）| 否，直接從緩存取
協商緩存|從緩存取|304（not modified）|是，經過服務器告知瀏覽器緩存是否可用

協商緩存header字段

響應頭信息：

1.etag：服務器響應時，告訴瀏覽器當前資源在服務器的惟一標識（生成規則由服務器決定）。

2.Last-Modified:表示這個響應資源的的最後修改時間。

請求頭信息：

1.If-None-Match: 當資源過時時候，瀏覽器法相響應頭裏有Etag，則再次向服務器請求時帶上請求頭if-none-match（值是etag的值）。服務器收到請求進行對比，決定返回200 或者304

二、If-Modified-Since:當資源過時時（瀏覽器判斷cache-control標識的max-age過時），發現響應頭具備last-Modified聲明，則再次像服務器請求時帶上if-modified-since，表示請求時間。服務器收到請求後發現有if-modified-since則與被請求資源的最後修改時間進行對比（last-modified），若修改時間較新（大），說明資源又被改過，則返回最新資源，http 200 ok。若最後時間較小，說明資源無修改，響應http 304走緩存

爲何既有last-modified 還有etag，二者並存的好處？

http1.1中etag的出現主要是爲了解決幾個last-modified比較難解決的問題

一些文件也許會週期性的更改，可是他的內容並不改變(僅僅改變的修改時間)，這個時候咱們並不但願客戶端認爲這個文件被修改了，而從新GET；

某些文件修改很是頻繁，好比在秒如下的時間內進行修改，(比方說1s內修改了N次)，If-Modified-Since能檢查到的粒度是s級的，這種修改沒法判斷(或者說UNIX記錄MTIME只能精確到秒)。

某些服務器不能精確的獲得文件的最後修改時間。

這時，利用Etag可以更加準確的控制緩存，由於Etag是服務器自動生成或者由開發者生成的對應資源在服務器端的惟一標識符。
Last-Modified與ETag是能夠一塊兒使用的，服務器會優先驗證ETag，一致的狀況下，纔會繼續比對Last-Modified，最後才決定是否返回304。

用戶行爲對緩存的影響

用戶操做	Expires/Cache-Control	Last-Modified/Etag
地址欄回車	有效	有效
頁面連接跳轉	有效	有效
新開窗口	有效	有效
前進後退	有效	有效
F5刷新	無效	有效
Ctrl+F5強制刷新	無效	無效

文章只是以前在網上學習的筆記，若有雷同，請聯繫