瀏覽器緩存策略

在優(yōu)化網(wǎng)站性能的時(shí)候,瀏覽器緩存是一個(gè)很重要的策略,他會(huì)去緩存一些很少更新的圖片資源,js資源等。減少瀏覽器和服務(wù)器的資源傳輸。極大的優(yōu)化了網(wǎng)站的呈現(xiàn)時(shí)間.主要有協(xié)商緩存和強(qiáng)制緩存兩種方式。

第一次請(qǐng)求服務(wù)器,瀏覽器無(wú)緩存,直接去服務(wù)器拿資源:


image.png

第二次請(qǐng)求服務(wù)器,判斷是否過(guò)期,沒有過(guò)期采用強(qiáng)緩存,過(guò)期采用協(xié)商緩存策略。
過(guò)期的判斷規(guī)則和服務(wù)器決策策略規(guī)則在圖中有寫出


image.png

網(wǎng)上有很多關(guān)于這方面的描述,我只是把圖重新自己整理了下,梳理了思路

參考:https://segmentfault.com/a/1190000008956069

Cache-Control

Cache-Control是在http1.1中出現(xiàn)的,主要是利用該字段的max-age值來(lái)進(jìn)行判斷,它是一個(gè)相對(duì)時(shí)間,例如Cache-Control:max-age=3600,代表著資源的有效期是3600秒。cache-control除了該字段外,還有下面幾個(gè)比較常用的設(shè)置值:

  • no-cache:不使用本地緩存。需要使用緩存協(xié)商,先與服務(wù)器確認(rèn)返回的響應(yīng)是否被更改,如果之前的響應(yīng)中存在ETag,那么請(qǐng)求的時(shí)候會(huì)與服務(wù)端驗(yàn)證,如果資源未被更改,則可以避免重新下載。

  • no-store:直接禁止游覽器緩存數(shù)據(jù),每次用戶請(qǐng)求該資源,都會(huì)向服務(wù)器發(fā)送一個(gè)請(qǐng)求,每次都會(huì)下載完整的資源。

  • public:可以被所有的用戶緩存,包括終端用戶和CDN等中間代理服務(wù)器。

  • private:只能被終端用戶的瀏覽器緩存,不允許CDN等中繼緩存服務(wù)器對(duì)其緩存。
    Cache-Control與Expires可以在服務(wù)端配置同時(shí)啟用,同時(shí)啟用的時(shí)候Cache-Control優(yōu)先級(jí)高。

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

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

  • 當(dāng)瀏覽器請(qǐng)求一個(gè)網(wǎng)站的時(shí)候,會(huì)加載各種各樣的資源,比如:HTML文檔、圖片、CSS和JS等文件。對(duì)于一些不經(jīng)常變的...
    LUGY閱讀 986評(píng)論 0 0
  • 最近在對(duì)項(xiàng)目做 IE 11 兼容,由 IE 的緩存問(wèn)題,引發(fā)我對(duì)于瀏覽器緩存策略的思考。 緩存類型 web緩存主要...
    丶chlorine閱讀 942評(píng)論 0 1
  • 今天的主題讓我想起了過(guò)去的無(wú)知和愚蠢,不過(guò)誰(shuí)不是一點(diǎn)點(diǎn)進(jìn)步的了~ 有一次,向開發(fā)提了一個(gè)web端的bug,回歸后還...
    最愛西紅柿閱讀 455評(píng)論 0 0
  • 在前端開發(fā)中,性能一直是被大家所重視的一點(diǎn),然而判斷一個(gè)網(wǎng)站的性能最直觀的就是看網(wǎng)頁(yè)打開的速度。其中提高網(wǎng)頁(yè)反應(yīng)速...
    meow_possion閱讀 1,546評(píng)論 0 0
  • 今天看奇舞團(tuán)推了篇文章講緩存策略的,講的挺不錯(cuò),記錄一下。 原文地址就在下面。 總結(jié): 緩存分為強(qiáng)緩存和協(xié)商緩存...
    NowhereToRun閱讀 4,979評(píng)論 1 7

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