HTTP 快取機制-有解無憂

完整高頻題庫倉庫地址：https://github.com/hzfe/awesome-interview

完整高頻題庫閱讀地址：https://febook.hzfe.org/

回答關鍵點

強快取 協商快取

HTTP 快取主要分為強快取和協商快取，

強快取可以通過 Expires / Cache-Control 控制，命中強快取時不會發起網路請求，資源直接從本地獲取，瀏覽器顯示狀態碼 200 from cache，

協商快取可以通過 Last-Modified / If-Modified-Since 和 Etag / If-None-Match 控制，開啟協商快取時向服務器發送的請求會帶上快取標識，若命中協商快取服務器回傳 304 Not Modified 表示瀏覽器可以使用本地快取檔案，否則回傳 200 OK 正常回傳資料，

知識點深入

1. 流程圖

2.強快取

2.1 Expires

HTTP/1.0 產物，
優先級低于 Cache-control: max-age，
缺點：使用本地時間判斷是否過期，而本地時間是可修改的且并非一定準確的，

Expires 是由服務端回傳的資源過期時間（GTM 日期格式/時間戳），若用戶本地時間在過期時間前，則不發送請求直接從本地獲取資源，

2.2 Cache-Control

HTTP/1.1 產物，
優先級高于 Expires，
正確區分 no-cache / no-store 的作用，

Cache-Control 是用于頁面快取的通用訊息頭欄位，可以通過指定指令來實作快取機制，

常用的欄位有：

max-age 設定快取存盤的最大時長，單位秒，
s-max-age 與 max-age 用法一致，不過僅適用于代理服務器，
public 表示回應可被任何物件快取，
private 表示回應只可被私有用戶快取，不能被代理服務器快取，
no-cache 強制客戶端向服務器發起請求（禁用強快取，可用協商快取），
no-store 禁止一切快取，包含協商快取也不可用，
must-revalidate 一旦資源過期，在成功向原始服務器驗證之前，快取不能用該資源回應后續請求，
immutable 表示回應正文不會隨時間改變（只要資源不過期就不發送請求），

值得注意的是，雖然以上常用欄位都是回應頭的欄位，但是 Cache-Control 同時也支持請求頭，例如 Cache-Control: max-stale=<seconds> 表明客戶端愿意接收一個已經過期但不能超出<seconds>秒的資源，

2.3 拓展知識（冷門考點）

HTTP/1.0 Pragma
- 在 HTTP/1.0 時期用于禁用瀏覽器快取 Pragma: no-cache，
快取位置
- 從 Service Worker 中讀取快取（只支持 HTTPS），
- 從記憶體讀取快取時 network 顯示 memory cache，
- 從硬碟讀取快取時 network 顯示 disk cache，
- Push Cache（推送快取）（HTTP/2.0），
- 優先級 Service Worker > memory cache > disk cache > Push Cache，
最佳實踐：資源盡可能命中強快取，且在資源檔案更新時保證用戶使用到最新的資源檔案
- 強快取只會命中相同命名的資源檔案，
- 在資源檔案上加 hash 標識（webpack 可在打包時在檔案名上帶上），
- 通過更新資源檔案名來強制更新命中強快取的資源，

3. 協商快取

3.1 ETag / If-None-Match

通過唯一標識來驗證快取，
優先級高于 Last-Modified / If-Modified-Since，

如果資源請求的回應頭里含有 ETag，客戶端可以在后續的請求的頭中帶上 If-None-Match 頭來驗證快取，若服務器判斷資源標識一致，則回傳 304 狀態碼告知瀏覽器可從本地讀取快取，

唯一標識內容是由服務端生成演算法決定的，可以是資源內容生成的哈希值，也可以是最后修改時間戳的哈希值，所以 Etag 標識改變并不代表資源檔案改變，反之亦然，

3.2 Last-Modified / If-Modified-Since

通過資源的最后修改時間來驗證快取，
優先級低于 ETag / If-None-Match，
缺點：只能精確到秒，若 1s 內多次修改資源 Last-Modified 不會變化，

如果資源請求的回應頭里含有 Last-Modified，客戶端可以在后續的請求的頭中帶上 If-Modified-Since 頭來驗證快取，若服務器判斷資源最后修改時間一致，則回傳 304 狀態碼告知瀏覽器可從本地讀取快取，

3.3 拓展知識（冷門考點）

ETag 在標識前面加 W/ 前綴表示用弱比較演算法（If-None-Match 本身就只用弱比較演算法），
ETag 還可以配合 If-Match 檢測當前請求是否為最新版本，若資源不匹配回傳狀態碼 412 錯誤，（If-Match 不加 W/ 時使用強比較演算法），

4. 快取的優缺點

優點

節省了不必要的資料傳輸，節省帶寬，
減少服務端的負擔，提高網站性能，
降低網路延遲，加快頁面回應速度，增強用戶體驗，

缺點

不恰當的快取設定可能會導致資源更新不及時，導致用戶獲取資訊滯后，

參考資料

HTTP Caching

轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/304107.html

標籤：其他

上一篇：視覺SLAM十四講概述部分

下一篇：前端 =＞記錄一些日常作業干貨

HTTP 快取機制

相關問題