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

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

為什么使用http緩存:

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

瀏覽器緩存:

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

總結(jié):

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

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

總結(jié)

以上是生活随笔為你收集整理的http --- 前端的缓存的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。