瀏覽器的緩存規則是在 http 協議頭和 html 頁面的 meta 標簽中定義的。主要分為兩部分：強緩存和協商緩存。
強緩存是指緩存的副本在有效期內，瀏覽器直接獲取這個副本並渲染。
強緩存主要涉及的 http 協議報頭有：Expires，cache-control。
強緩存的過程：瀏覽器發起 http 請求，瀏覽器緩存中查找該請求的結果以及緩存標識，緩存副本在有效期內，該請求返回狀態碼 200，從 disk cache 或 memory cache （size 中顯示 from disk cache 或 from memory cache）中返回。如果緩存副本並不在有效期內，瀏覽器將發起 http 請求到服務端，服務端返回請求結果和緩存規則，並將請求結果和緩存標識存在瀏覽器緩存中。
Expires：是HTTP/1的產物，是一個絕對的時間，如果瀏覽器時間還沒有超過這個expires時間，代表緩存還有效。直接從緩存中讀取資源。
cache-control：是HTTP/1.1提出的。
| 指令 | 作用 |
| public | 表明響應可以被任何對象（包括：發送請求的客戶端，代理服務器，等 等）緩存。 |
| private | 表明響應只能被單個用戶緩存，不能作為共享緩存（即代理服務器不能 緩存它）,可以緩存響應內容。 |
| no-cache | 在釋放緩存副本之前，強制高速緩存將請求提交給原始服務器進行驗證。 |
| only-if-cached | 表明客戶端只接受已緩存的響應，並且不要向原始服務器檢查是否有更 新的拷貝 |
| max-age=<seconds> | 設置緩存存儲的最大周期，超過這個時間緩存被認為過期(單位秒)。 與Expires相反，時間是相對於請求的時間。 |
| s-maxage=<seconds> | 覆蓋max-age 或者 Expires 頭，但是僅適用於共享緩存(比如各個代理)， 並且私有緩存中它被忽略。 |
| max-stale[=<seconds>] | 表明客戶端願意接收一個已經過期的資源。 可選的設置一個時間(單位秒)， 表示響應不能超過的過時時間。 |
| min-fresh=<seconds> | 表示客戶端希望在指定的時間內獲取最新的響應。 |
如果 cache-control 和 expires 同時存在的話，cache-control 優先級高於 Expires。Expires 設置的過期時間受客戶端本地時間影響。
協商緩存是在強緩存失效后，瀏覽器攜帶緩存標識向服務器發起請求，由服務器根據緩存標識決定是否使用緩存的過程。
協商緩存的過程：瀏覽器發起 http 請求，瀏覽器緩存返回緩存標識（請求的緩存結果失效），瀏覽器攜帶該資源的緩存標識，向服務器發起 http 請求，如果服務器返回 304 和 not modified，瀏覽器向瀏覽器緩存獲取該請求的緩存結果，瀏覽器環迅返回該請求結果。如果服務器返回 200 和請求結果（該資源更新了，重新返回請求結果），瀏覽器將該請求結果和緩存標識存入瀏覽器緩存中。
協商緩存主要涉及的 http 協議報頭有：Last-Modified 和 ETag。
Last-Modified：瀏覽器在第一次訪問資源時，服務器返回響應頭Last-Modified，值是這個資源在服務器上的最后修改時間，瀏覽器接收后緩存文件和header；再次請求資源，瀏覽器檢測有 Last-Modified 就會添加請求頭 If-Modified-Since，值是Last-Modified 的值。服務器接收請求會根據 If-Modified-Since 中的值與服務器中這個資源的最后修改時間對比，如果沒有變化返回 304 和空的響應體，直接從緩存讀取。如果 If-Modified-Since 時間小於服務器中這個資源的最后修改時間，說明文件有更新，於是返回新的資源文件和 200。
Etag 和 If-None-Match：Etag返回的是資源文件的唯一標識，只要文件有變化嗎Etag就會重新生成。瀏覽器在下次加載資源時帶上 If-None-Match，值是ETag。服務器比較跟資源文件的ETag是否一致。如果一致，則直接返回 304 。
如果 ETag 和 Last-Modified 同時存在，ETag 優於 Last-Modified.Last-Modified
的時間單位是秒，秒級別的修改，不能保證精度。如果是負載均衡的服務器各個服務器生成的 Last-Modified 也有可能不一致。在性能上，ETag 要遜於 Last-Modified，ETag
需要服務器通過算法計算一個hash值。
協商緩存是無法減少請求數的開銷的，但是可以減少返回的正文大小。一般來說，對於勤改動的html文件，使用協商緩存是一種不錯的選擇。
F5 刷新，Expires/cache-control 無效了，Last-Modified/ETag 還是有效的。
Ctrl + F5 強制刷新，Expires/cache-control，Last-Modified 都無效。
不被緩存的請求：
- 包含cache-control：no-cache，pragma：no-cache 或者 cache-control：max-age=0等。
- 需要根據cookie，認證信息等決定輸入內容的動態請求是不能被緩存的。
- post 請求。
基於緩存策略：
- 同一個url保證穩定性。
- 給 css 、js 、圖片等資源增加 HTTP 緩存頭（對於不常修改的靜態資源，設置一個較長的時間），入口 html 不建議設置緩存。
- 減少對 cookie 的依賴，每次 get 和 post 請求，都帶上 cookie 增加網絡傳輸流量，導致增長交互時間，同時cache 是很難緩存的。
參考博客：
https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers
https://www.jianshu.com/p/54cc04190252
http://www.alloyteam.com/2012/03/web-cache-2-browser-cache/