基本概念
- Etag：web服務器響應請求時，告訴瀏覽器當前資源在服務器的唯一標識（生成規則由服務器決定）。
- If-None-Match：當資源過期時（使用Cache-Control標識的max-age），發現資源具有Etage聲明，則再次向web服務器請求時帶上頭If-None-Match （Etag的值）。web服務器收到請求後發現有頭If-None-Match 則與被請求資源的相應校驗串進行比對，決定是否命中協商緩存；
- Last-Modify/If-Modify-Since：瀏覽器第一次請求一個資源的時候，服務器返回的header中會加上Last-Modify，Last-modify是一個時間標識該資源的最後修改時間；當瀏覽器再次請求該資源時，request的請求頭中會包含If-Modify-Since，該值爲緩存之前返回的Last-Modify。服務器收到If-Modify-Since後，根據資源的最後修改時間判斷是否命中緩存。
- Expires：response header裏的過期時間，瀏覽器再次加載資源時，如果在這個過期時間內，則命中強緩存。
- Cache-Control：當值設爲max-age=300時，則代表在這個請求正確返回時間（瀏覽器也會記錄下來）的5分鐘內再次加載資源，就會命中強緩存。
- -no-cache：不使用本地緩存。需要使用緩存協商，先與服務器確認返回的響應是否被更改，如果之前的響應中存在ETag，那麼請求的時候會與服務端驗證，如果資源未被更改，則可以避免重新下載。
- -no-store：直接禁止瀏覽器緩存數據，每次用戶請求該資源，都會向服務器發送一個請求，每次都會下載完整的資源。
瀏覽器緩存過程
1. 初始狀態
第一次訪問時，向服務器發送請求，成功收到響應，返回200，瀏覽器下載資源文件，並記錄下response header和返回時間。
2. 再次請求相同資源
再次訪問相同資源時，本地先判斷是否需要發送請求給服務端：
- 比較當前時間和上一次返回200時的時間差，如果未超過過期時間，則命中強緩存，讀取本地緩存資源
- 如果過期了，則向服務器發送header帶有If-None-Match和If-Modified-Since的請求
3.服務器收到請求後，優先根據Etag的值判斷被請求的文件有沒有做修改，Etag值一致則沒有修改，命中協商緩存，返回304；如果不一致則有改動，直接返回新的資源文件帶上新的Etag值並返回200；
4.如果服務器收到的請求沒有Etag值，則將If-Modified-Since和被請求文件的最後修改時間做比對，一致則命中協商緩存，返回304；不一致則返回新的last-modified和文件並返回200；
兩種刷新對頁面的影響
- 點擊刷新按鈕或者按F5
瀏覽器直接對本地的緩存文件過期，但是會帶上If-Modifed-Since，If-None-Match,這就意味着服務器會對文件檢查新鮮度，返回結果可能是304，也有可能是200.
- 用戶按Ctrl+F5（強制刷新）
瀏覽器不僅會對本地文件過期，而且不會帶上 If-Modifed-Since，If-None-Match，相當於之前從來沒有請求過，返回結果是200.
參考文章：