Web緩存之瀏覽器緩存-http緩存

http請求設計

API設計:url中加vn表示版本,節(jié)點表示業(yè)務、http方法表示動作(GET\POST\PUT\DELETE)、響應碼、狀態(tài)碼
攔截器:HttpInterceptor
包括以下功能:身份認證token、統(tǒng)一相應處理、異常解決

Web緩存

數(shù)據(jù)庫緩存、服務端緩存(代理服務器緩存和CDN緩存)、瀏覽器端緩存、Web應用層緩存
http緩存就是Web緩存中的瀏覽器端緩存中的基于http協(xié)議實現(xiàn)的那一種,也是平時最常見的一種緩存。

http緩存過程

第一次請求

第二次請求

強制緩存

expires:服務器返回的到期時間,用在HTTP1.0,存在緩存命中誤差。HTTP1.1中用Cache-Control替代
Cache-Control:private客戶端緩存,public客戶端和代理服務器緩存(對于FEdev,兩者無區(qū)別)、max-age=xxx緩存內(nèi)容在xxxs后失效,no-cache對比緩存進行緩存數(shù)據(jù)驗證、no-store不緩存

對比緩存(協(xié)商緩存)

Last-Modified:第一次請求時,服務器返回的資源最后修改時間
If-Modified-Since:再次請求時,瀏覽器通知服務器,上次請求時返回資源最后修改時間
Etag:服務器響應請求時,返回資源唯一標識
If-None-Match:再次請求服務器時,通過此字段通知服務器客戶段緩存數(shù)據(jù)的唯一標識。


強制緩存和對比緩存
緩存對比

對于強制緩存,服務器通知瀏覽器一個緩存時間,在緩存時間內(nèi),下次請求,直接用緩存,不在時間內(nèi),執(zhí)行比較緩存策略。
對于比較緩存,將緩存信息中的Etag和Last-Modified通過請求發(fā)送給服務器,由服務器校驗,返回304狀態(tài)碼時,瀏覽器直接使用緩存。
參考資料:
HTTP2簡介和web優(yōu)化
http緩存機制及原理
Angular中優(yōu)雅編寫http請求
Angular7 HttpClient處理多個請求
HttpClient高并發(fā)下性能優(yōu)化-http連接池

?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內(nèi)容

  • 網(wǎng)絡特有的延遲以及數(shù)據(jù)傳輸?shù)某杀?,制約互聯(lián)網(wǎng)快速獲取Web資源。為此,HTTP協(xié)議引入緩存以空間換時間,使瀏覽器緩...
    大頭8086閱讀 3,206評論 2 12
  • 瀏覽器對于請求資源, 流程如圖所示: 可以看到瀏覽器的緩存機制分為兩個部分: 1、當前緩存是否過期? 2、服務器中...
    zhoulujun閱讀 1,290評論 0 3
  • 一、前言 緩存可以說是性能優(yōu)化中簡單高效的一種優(yōu)化方式了。一個優(yōu)秀的緩存策略可以縮短網(wǎng)頁請求資源的距離,減少延遲,...
    浪里行舟閱讀 209,009評論 46 521
  • ? 豆瓣電影傳送門 我是一名豆瓣愛好者,常常在豆瓣APP上面標記想看的電影,然后在有空的時候再去找資源看。豆瓣最近...
    Neulana閱讀 1,907評論 0 12
  • 昨天本想引導兒子看看動畫片以外的電視節(jié)目,可是兒子直接沒興趣,引導失敗,算了,反正也快開學了,隨他看吧。 ...
    蘋果杭媽閱讀 199評論 0 0

友情鏈接更多精彩內(nèi)容