前端的緩存分為: http緩存 和 瀏覽器緩存
http緩存:

// 當客戶端向服務器請求資源時,會先抵達瀏覽器緩存,如果瀏覽器有"要請求資源"的副本
// 就會從瀏覽器緩存中提取而不是從原始服務器中提取這個資源// 常見的http緩存,只能緩存get請求響應的資源,對于其他類型的響應則無能為力,所以后續說的請求緩存都是指GET請求// http緩存都是從第二次請求開始的.第一次請求資源時,服務器返回資源,并在response header頭中回傳資源的緩存參數
// 第二次請求時,瀏覽器判斷這些請求參數,命中強緩存就直接200,否則就把請求參數加到request header頭中傳給服務器
// 看是否命中協商緩存,命中則返回304,否則服務器會返回新的資源// 注1:強制緩存如果生效,會返回狀態碼200,且不需要和服務器進行交互
//     協商緩存無論是否生效,會返回狀態碼304,都需要和服務器進行交互// 注2:強制緩存是否失效(根據Cache-Control的max-age有沒有超時,或expires的緩存有沒有過期判斷)// 協商緩存:
// 當第一請求時服務器返回的響應頭中沒有Cache-Control和Expire或者Cache-Control和Expires過期
// 亦或者它的屬性設置為no-cache,那么瀏覽器第二次請求時,就會與服務器進行協商
// 與服務器端對比判斷資源是否進行了修改更新.如果服務器端的資源沒有修改,那么就會返回304狀態碼
// 告訴瀏覽器可以使用緩存中的數據,這樣就減少了服務器的數據傳輸壓力.// 注3:私有緩存(瀏覽器緩存):Cache-Control: Private
// 注4:共享緩存(代理級緩存):Cache-Control: Public

為什么使用http緩存:

// 1.減少冗余的數據傳輸,節省流量
// 2.緩解服務器的壓力,提高服務器的性能
// 3.加快了頁面加載的速度

瀏覽器緩存:

// 常見的有3種:cookie,sessionStorage和localSotrage
// cookie:兼容各種瀏覽器,每次都會和后臺交互,可設置過期時間
// sessionStorage:不兼容低版本瀏覽器,本地存儲,不會每次和后臺交互,會話關閉,緩存失效
// localStorage:不兼容低版本瀏覽器,本地緩存,不會每次和后臺交互,需要手動刪除

總結:

1.強制緩存:服務器會告訴瀏覽器一個過期時間,在規定時間內,無需告知服務器,直接使用緩存,過期則使用協商緩存
2.將緩存中的Etag和Last-Modified通過請求告訴服務器,由服務器校驗,返回304狀態碼時,瀏覽器直接使用緩存

參考 https://mp.weixin.qq.com/s?__biz=MzUyNDYxNDAyMg==&mid=2247484343&idx=1&sn=efb2f0eacc32e24ca2dd8bed0900f85e&chksm=fa2be35ecd5c6a48246107307ea838c42e807fb6ddf4838228ef552a387e0a02f0c64f1a4606&mpshare=1&scene=23&srcid=#rd