學會這篇就夠了，徹底弄懂前端緩存了
分類
前端緩存分為強緩存和協商緩存兩種。
強緩存
強緩存主要使用Expires、Cache-Control 兩個頭字段，兩者同時存在Cache-Control 優先級更高。當命中強緩存的時候，客戶端不會再求，直接從緩存中讀取內容，并返回HTTP狀態碼200。
- Expires
響應頭，代表該資源的過期時間。是一個GMT 格式的標準時間。
當客戶端請求服務器的時候，服務器會返回資源的同時還會帶上響應頭Expires，表示資源的過期具體時間，如果客戶端在過期時間之前再次獲取該資源，就不需要再請求我服務器了，可以直接在緩存里面拿。
使用Expires強緩存優點：
- 在過期時間以內，為用戶省了很多流量。
- 減少了服務器重復讀取磁盤文件的壓力。
使用Expires強緩存缺點
- 緩存過期以后，服務器不管文件有沒有變化會再次請求服務器。
- 緩存過期時間是一個具體的時間，這個時間依賴于客戶端的時間，如果時間不準確或者被改動緩存也會隨之受到影響。
- Cache-Control
請求/響應頭，緩存控制字段，精確控制緩存策略。
為了讓強緩存更精確，HTTP1.1增加了Cache-Control字段。Cache-Control既能出現在請求頭又能出現在響應頭，其不同的值代表不同的意思，下面我們具體分析一下。
Cache-Control 服務端參數：
- max-age: 在多少秒內有效，是一個相對時間，這樣比Expires具體的時間就更精確了。
- s-maxage: 就是用于表示 cache 服務器上（比如 cache CDN，緩存代理服務器）的緩存的有效時間的，并只對 public 緩存有效。
- no-cache：不使用本地強緩存。需要使用緩存協商。
- no-store：直接禁止瀏覽器緩存數據，每次用戶請求該資源，都會向服務器發送一個請求，每次都會下載完整的資源。
- public：可以被所有的用戶緩存，包括終端用戶和中間代理服務器。
- private：只能被終端用戶的瀏覽器緩存，不允許中間緩存代理進行緩存，默認的。
Cache-Control 客戶端參數：
- max-stale: 5 表示客戶端到代理服務器上拿緩存的時候，即使代理緩存過期了也不要緊，只要過期時間在 5 秒之內，還是可以從代理中獲取的。
- min-fresh: 5 表示代理緩存需要一定的新鮮度，不要等到緩存剛好到期再拿，一定要在到期前 5 秒之前的時間拿，否則拿不到。
- only-if-cached 這個字段加上后表示客戶端只會接受代理緩存，而不會接受源服務器的響應。如果代理緩存無效，則直接返回 504（Gateway Timeout）。
協商緩存
協商緩存主要有四個頭字段，它們兩兩組合配合使用，If-Modified-Since 和 Last-Modified一組，Etag 和 If-None-Match一組，當同時存在的時候會以Etag 和 If-None-Match為主。當命中協商緩存的時候，服務器會返回HTTP狀態碼304，讓客戶端直接從本地緩存里面讀取文件。
- If-Modified-Since
請求頭，資源最近修改時間，由瀏覽器告訴服務器。其實就是第一次訪問服務端返回的Last-Modified的值。
- Last-Modified
響應頭，資源最近修改時間，由服務器告訴瀏覽器。
- Etag
響應頭，資源標識，由服務器告訴瀏覽器。
- If-None-Match
請求頭，緩存資源標識，由瀏覽器告訴服務器。其實就是第一次訪問服務端返回的Etag的值。
If-Modified-Since 和 Last-Modified
當客戶端第一次請求服務器的時候，服務端會返回一個Last-Modified響應頭，該字段是一個標準時間?？蛻舳苏埱蠓掌鞯臅r候會帶上If-Modified-Since請求頭字段，該字段的值就是服務器返回的Last-Modified的值。服務器接收到請求后會比較這兩個值是否一樣，一樣就返回304，讓客戶端從緩存中讀取，不一樣就會返回新文件給客戶端并更新Last-Modified響應頭字段的值。
使用If-Modified-Since 和 Last-Modified的優點：
- 當緩存有效時服務器不會返回文件給客戶端，而是直接返回304狀態碼，讓客戶端從緩存中獲取文件。大大節省了流量和帶寬以及服務器的壓力。
使用If-Modified-Since 和 Last-Modified的缺點：
- Last-Modified 過期時間只能精確到秒。如果在同一秒既修改了文件又獲取文件，客戶端是獲取不到最新文件的。
Etag 和 If-None-Match
為了解決文件修改時間只能精確到秒帶來的問題，我們引入 Etag 響應頭。Etag 是由文件修改時間與文件大小計算而成，只有當文件文件內容或修改時間變了Etag的值才會發生變化。
當客戶端第一次請求服務器的時候，服務端會返回一個Etag響應頭?？蛻舳苏埱蠓掌鞯臅r候會帶上If-None-Match請求頭字段，該字段的值就是服務器返回的Etag的值。服務器接收到請求后會比較這兩個值是否一樣，一樣就返回304，讓客戶端從緩存中讀取，不一樣就會返回新文件給客戶端并更新Etag響應頭字段的值。
使用Etag 和 If-None-Match的優點：
- 當緩存有效時服務器不會返回文件給客戶端，而是直接返回304狀態碼，讓客戶端從緩存中獲取文件。大大節省了流量和帶寬以及服務器的壓力。
- 并且解決了一秒內修改并讀取的問題。
擴展
緩存失效問題
引入了緩存固然是好事，能大大提升響應速度以及減輕服務端的壓力，但是也會出現一些問題，比如我們明明更新了系統版本，為什么客戶端看到的還是老文件。在不同的時代有不同的解決方案。
老方案
老方案通過人工自己修改文件名或者在文件名后帶上版本號、時間戳，這樣客戶端就會當新文件請求并使用，之前的強緩存就算在有效期內也會失效。
<script src="http://randy.js?version=1.1.1> </script>
復制代碼
新方案
在現在的構建階段基本上都不需要人工操作了，都是使用構建工具比如Wbpack、Gulp、Grunt等構建工具自動構建。比如在使用Webpack構建的時候，會根據文件名或文件內容自動計算hash值來給文件命名，當內容或文件名發生改變的時候，構建出來的文件名也一定會不一樣，這樣也解決了強緩存還在有效期內的問題。
pragma
pragma是舊產物，已經逐步拋棄，有些網站為了向下兼容還保留了這個字段。pragma的值為no-cache時，表示禁用緩存。優先級是 pragma > cache-control > expires。
流程圖
有了這張流程圖，可以讓你們理解的更清楚。
緩存的配置
如果我們使用Nginx作為Web服務器，我們可以如下配置。
location / {
# 其它配置
...
if ($request_uri ~* .*[.](js|css|map|jpg|png|svg|ico)$) {
#非html緩存1個月
add_header Cache-Control "public, max-age=2592000";
}
if ($request_filename ~* ^.*[.](html|htm)$) {
#html文件使用協商緩存
add_header Cache-Control "public, no-cache";
}
}
復制代碼
緩存到底存在哪？
很多小伙伴會好奇，這緩存到底存在哪里了呢？別急，我們接著往下講。
按緩存位置分類我們可以分為memory cache、disk cache、Service Worker三類，我們可以在 Chrome 的開發者工具中，Network -> Size 一列看到一個請求最終的處理方式：如果是大小 (多少 K， 多少 M 等) 就表示是網絡請求，否則會列出 from memory cache、from disk cache、from ServiceWorker就表示命中了緩存。
- memory cache 是內存中的緩存，(與之相對 disk cache 就是硬盤上的緩存)。按照操作系統的常理：先讀內存，再讀硬盤。
微信截圖_20220119110918.png
- disk cache 也叫 HTTP cache，顧名思義是存儲在硬盤上的緩存，因此它是持久存儲的，是實際存在于文件系統中的。而且它允許相同的資源在跨會話，甚至跨站點的情況下使用，例如兩個站點都使用了同一張圖片。
微信截圖_20220119110855.png
- 上述的緩存策略以及緩存/讀取/失效的動作都是由瀏覽器內部判斷進行的，我們只能設置響應頭的某些字段來告訴瀏覽器，而不能自己操作。service work給予了我們另外一種更加靈活，可以直接的操作方式。我們可以從 Chrome 的 Application找到Service Workers。這個緩存是永久性的，即關閉 TAB 或者瀏覽器，下次打開依然還在(而 memory cache 不是)。有兩種情況會導致這個緩存中的資源被清除：手動調用 API cache.delete(resource) 或者容量超過限制，被瀏覽器全部清空。
后記
本文為筆者個人學習筆記，如有謬誤，還請告知，萬分感謝！如果本文對你有所幫助，還請點個贊~~
