http快取梳理

借鑑並且摘抄了這篇部落格的部分內容
http快取詳解，http快取推薦方案

http請求和響應頭的快取欄位

1. Cache-control

快取控制頭，http快取控制的最高指令

no-store：所有內容都不快取

no-cache：快取，但是瀏覽器使用快取前，都會請求瀏覽器判斷快取資源是否是最新

max-age=x：請求快取後的X秒不再發起請求，屬於http 1.1的屬性，與 Expire(http 1.0) 類似，但是優先順序比 Expires 。這是一個相對時間，expire是絕對時間。max-age=0等同於no-cache

s-maxage=x：代理伺服器請求源站快取X秒後不再發起請求，只對CDN快取有效

public：客戶端和代理伺服器都可快取

private：只有客戶端可以快取

2.Expires

響應頭，代表資源過期時間，由伺服器返回提供，GMT格式日期，是http1.0的屬性，在與max-age(http1.1)共存的情況下，優先順序要低。

3.Last-Modified 和 if-Modified-Since

Last-Modified 是響應頭，資源最新修改時間，由伺服器告訴瀏覽器。就是該檔案在檔案系統中的最近修改時間。

if-Modified-Since 是請求頭，資源最新修改時間，由瀏覽器告訴伺服器，把伺服器給的 Last-Modified 請求又還給伺服器對比

5.Etag 和 if-None-Match，優先順序比上述兩項高

Etag 是響應頭，資源標識，由伺服器告訴瀏覽器。

if-None-Match 是請求頭，快取資源標識，由瀏覽器告訴伺服器，就是伺服器給的Etag，伺服器進行對比。

7.Pragma

是一個在 HTTP/1.0 中規定的通用首部，這個首部的效果依賴於不同的實現，所以在“請求-響應”鏈中可能會有不同的效果。它用來向後相容只支援 HTTP/1.0 協議的快取伺服器，那時候 HTTP/1.1 協議中的 Cache-Control 還沒有出來。

看一張圖片的載入請求。

首次載入，瀏覽器預設 cache-control: no-cache。伺服器返回cache-control:public, max-age=0 Last-Modified: Mon, 07 Dec 2020 14:38:48 GMT ETag: "P9fD9DvFuQoSGBR4aLWx+w==",告訴瀏覽器快取策略為no-cache，並且返回資源的修改時間和e-tag。用於下次請求的時候，將這兩項資訊返回給伺服器用於判斷前端的快取檔案是否最新。

GET /public/img.jpeg HTTP/1.1
Host: 127.0.0.1:7001
Connection: keep-alive
Pragma: no-cache
Cache-Control: no-cache
User-Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.67 Safari/537.36
Accept: image/webp,image/apng,image/*,*/*;q=0.8
Referer: http://127.0.0.1:7001/
Accept-Encoding: gzip, deflate, br
Accept-Language: zh-CN,zh;q=0.9,en;q=0.8
Cookie: _editor=markdown; csrfToken=E9TaTfCpenoCXMfMDi-a0qJU

HTTP/1.1 200 OK
Accept-Ranges: bytes
Last-Modified: Mon, 07 Dec 2020 14:38:48 GMT
ETag: "P9fD9DvFuQoSGBR4aLWx+w=="
content-type: image/jpeg
content-length: 61672
cache-control: public, max-age=0
content-md5: P9fD9DvFuQoSGBR4aLWx+w==
x-readtime: 1
keep-alive: timeout=5
Date: Thu, 10 Dec 2020 16:33:54 GMT
Connection: keep-alive

第二次請求，瀏覽器將之前伺服器給的 last=modified 和 e-tag提交給伺服器，也就是請求頭裡的 if-modified-since 和 if-none-match 。伺服器判斷檔案沒有修改，返回304。瀏覽器使用快取檔案。

GET /public/img.jpeg HTTP/1.1
Host: 127.0.0.1:7001
Connection: keep-alive
If-None-Match: "P9fD9DvFuQoSGBR4aLWx+w=="
If-Modified-Since: Mon, 07 Dec 2020 14:38:48 GMT
User-Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.67 Safari/537.36
Accept: image/webp,image/apng,image/*,*/*;q=0.8
Referer: http://127.0.0.1:7001/
Accept-Encoding: gzip, deflate, br
Accept-Language: zh-CN,zh;q=0.9,en;q=0.8
Cookie: _editor=markdown; csrfToken=E9TaTfCpenoCXMfMDi-a0qJU

HTTP/1.1 304 Not Modified
Accept-Ranges: bytes
Last-Modified: Mon, 07 Dec 2020 14:38:48 GMT
ETag: "P9fD9DvFuQoSGBR4aLWx+w=="
x-readtime: 0
keep-alive: timeout=5
Date: Thu, 10 Dec 2020 16:32:08 GMT
Connection: keep-alive

F5 和 CTRL+F5 的區別

1.瀏覽器位址列回車，或者點選跳轉按鈕，前進，後退，新開視窗，這些行為，會讓Expires，max-age生效，也就是說，這幾種操作下，瀏覽器會判斷過期時間，再考慮要不要發起請求，當然Last-Modified和Etag也有效。

2.F5重新整理瀏覽器，或者使用瀏覽器導航欄的重新整理按鈕，這幾種，會忽略掉Expires，max-age的限制，強行發起請求，Last-Modified和Etag在這種情況下也有效。

3**.CTRL+F5**是強制請求，所有快取檔案都不使用，全部重新請求下載，因此Expires，max-age，Last-Modified和Etag全部失效。