目錄

• • • web緩存類型
    • 瀏覽器緩存規(guī)則：
    • 瀏覽器緩存的控制
    • • cache-control總結(jié)
      • Expires
      • Last-modified & If-modified-since
      • Etag & & If-None-Match
    • 瀏覽器緩存流程
    • 為什么要有etag？
    • 哪些請求不能被緩存？
    • 用戶操作行為與緩存的關(guān)系
    • HTTP狀態(tài)碼及區(qū)別

web緩存類型

數(shù)據(jù)庫數(shù)據(jù)緩存

服務(wù)器端緩存

瀏覽器端緩存

web應(yīng)用層緩存

下面著重關(guān)注一下瀏覽器緩存

瀏覽器緩存規(guī)則：

新鮮度（過期機制）：也就是緩存副本有效期。一個緩存副本必須滿足以下任一條件，瀏覽器會認(rèn)為它是有效的，足夠新的，而直接從緩存中獲取副本并渲染：

• 含有完整的過期時間控制頭信息（HTTP協(xié)議報頭），并且仍在有效期內(nèi)
• 瀏覽器已經(jīng)使用過這個緩存副本，并且在一個會話中已經(jīng)檢查過新鮮度

校驗值（驗證機制）：服務(wù)器返回資源的時候有時在控制頭信息帶上這個資源的實體標(biāo)簽Etag（Entity Tag），它可以用來作為瀏覽器再次請求過程的校驗標(biāo)識。如過發(fā)現(xiàn)校驗標(biāo)識不匹配，說明資源已經(jīng)被修改或過期，瀏覽器需求重新獲取資源內(nèi)容。

瀏覽器緩存的控制

使用HTML的 Meta 標(biāo)簽
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">

使用緩存有關(guān)的HTTP消息報頭

cache-control總結(jié)

cache-control: max-age
max-age（單位為s）指定設(shè)置緩存最大的有效時間，定義的是時間長短。當(dāng)瀏覽器向服務(wù)器發(fā)送請求后，在max-age這段時間里瀏覽器就不會再向服務(wù)器發(fā)送請求了。我們來找個資源看下。比如QQ推廣上的css資源，max-age=3600，也就是說緩存有效期為3600秒（也就是1h）。于是在1天內(nèi)都會使用這個版本的資源，即使服務(wù)器上的資源發(fā)生了變化，瀏覽器也不會得到通知。

cache-control: max-age=xxxx，public
客戶端和代理服務(wù)器都可以緩存該資源；
客戶端在xxx秒的有效期內(nèi)，如果有請求該資源的需求的話就直接讀取緩存,statu code:200 ，如果用戶做了刷新操作，就向服務(wù)器發(fā)起http請求

cache-control: max-age=xxxx，private
只讓客戶端可以緩存該資源；代理服務(wù)器不緩存
客戶端在xxx秒內(nèi)直接讀取緩存,statu code:200

cache-control: max-age=xxxx，immutable
客戶端在xxx秒的有效期內(nèi)，如果有請求該資源的需求的話就直接讀取緩存,statu code:200 ，即使用戶做了刷新操作，也不向服務(wù)器發(fā)起http請求

cache-control: no-cache
跳過設(shè)置強緩存，但是不妨礙設(shè)置協(xié)商緩存；一般如果你做了強緩存，只有在強緩存失效了才走協(xié)商緩存的，設(shè)置了no-cache就不會走強緩存了，每次請求都回詢問服務(wù)端。

cache-control: no-store
不緩存，這個會讓客戶端、服務(wù)器都不緩存，也就沒有所謂的強緩存、協(xié)商緩存了。

Expires

緩存過期時間，用來指定資源到期的時間，是服務(wù)器端的具體的時間點。也就是說， Expires=max-age + 請求時間 ，需要和Last-modified結(jié)合使用。但cache-control的優(yōu)先級更高。Expires是Web服務(wù)器響應(yīng)消息頭字段，在響應(yīng)http請求時告訴瀏覽器在過期時間前瀏覽器可以直接從瀏覽器緩存取數(shù)據(jù)，而無需再次請求。

Last-modified & If-modified-since

服務(wù)器端文件的最后修改時間，需要和cache-control共同使用，是檢查服務(wù)器端資源是否更新的一種方式。當(dāng)瀏覽器再次進行請求時，會向服務(wù)器傳送If-Modified-Since報頭，詢問Last-Modified時間點之后資源是否被修改過。如果沒有修改，則返回碼為304，使用緩存；如果修改過，則再次去服務(wù)器請求資源，返回碼和首次請求相同為200，資源為服務(wù)器最新資源。

Etag & & If-None-Match

根據(jù)實體內(nèi)容生成一段hash字符串，標(biāo)識資源的狀態(tài)，由服務(wù)端產(chǎn)生。瀏覽器會將這串字符串傳回服務(wù)器，驗證資源是否已經(jīng)修改，如果沒有修改，則返回304

瀏覽器緩存流程

為什么要有etag？

你可能會覺得使用 Last-Modified 已經(jīng)足以讓瀏覽器知道本地的緩存副本是否足夠新，為什么還需要 Etag（實體標(biāo)識）呢？HTTP1.1中Etag的出現(xiàn)主要是為了解決幾個 Last-Modified 比較難解決的問題：

• Last-Modified 標(biāo)注的最后修改只能精確到秒級，如果某些文件在1秒鐘以內(nèi)，被修改多次的話，它將不能準(zhǔn)確標(biāo)注文件的新鮮度

• 如果某些文件會被定期生成，當(dāng)有時內(nèi)容并沒有任何變化，但 Last-Modified 卻改變了，導(dǎo)致文件沒法使用緩存

• 有可能存在服務(wù)器沒有準(zhǔn)確獲取文件修改時間，或者與代理服務(wù)器時間不一致等情形

Etag是服務(wù)器自動生成或者由開發(fā)者生成的對應(yīng)資源在服務(wù)器端的唯一標(biāo)識符，能夠更加準(zhǔn)確的控制緩存。Last-Modified與ETag是可以一起使用的，服務(wù)器會優(yōu)先驗證ETag，一致的情況下，才會繼續(xù)比對Last-Modified，最后才決定是否返回304。

哪些請求不能被緩存？

無法被瀏覽器緩存的請求：

HTTP信息頭中包含Cache-Control:no-cache，pragma:no-cache，或Cache-Control:max-age=0等告訴瀏覽器不用緩存的請求

需要根據(jù)Cookie，認(rèn)證信息等決定輸入內(nèi)容的動態(tài)請求是不能被緩存的

經(jīng)過HTTPS安全加密的請求（有人也經(jīng)過測試發(fā)現(xiàn)，ie其實在頭部加入Cache-Control：max-age信息，firefox在頭部加入Cache-Control:Public之后，能夠?qū)TTPS的資源進行緩存，參考《HTTPS的七個誤解》)

POST請求無法被緩存

HTTP響應(yīng)頭中不包含Last-Modified/Etag，也不包含Cache-Control/Expires的請求無法被緩存

用戶操作行為與緩存的關(guān)系

• 普通刷新 – 當(dāng)按下F5或者點擊刷新按鈕來刷新頁面的時候，瀏覽器將繞過本地緩存來發(fā)送請求到服務(wù)器, 此時, 協(xié)商緩存是有效的
• 強制刷新 – 當(dāng)按下ctrl+F5來刷新頁面的時候, 瀏覽器將繞過各種緩存(本地緩存和協(xié)商緩存), 直接讓服務(wù)器返回最新的資源
• 回車或轉(zhuǎn)向 – 當(dāng)在地址欄上輸入回車或者按下跳轉(zhuǎn)按鈕的時候, 所有緩存都生效

HTTP狀態(tài)碼及區(qū)別

狀態(tài)類型說明

200	form memory cache	不請求網(wǎng)絡(luò)資源，資源在內(nèi)存當(dāng)中，一般腳本、字體、圖片會存在內(nèi)存當(dāng)中
200	form disk cache	不請求網(wǎng)絡(luò)資源，在磁盤當(dāng)中，一般非腳本會存在內(nèi)存當(dāng)中，如css等
200	資源大小數(shù)值	從服務(wù)器下載最新資源
304	報文大小	請求服務(wù)端發(fā)現(xiàn)資源沒更新，使用本地資源

總結(jié)

以上是生活随笔為你收集整理的浏览器缓存机制，强缓存，弱缓存的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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