瀏覽器緩存

瀏覽器緩存機制,其實主要就是HTTP協議定義的緩存機制(如: Expires; Cache-control等)。但是也有非HTTP協議定義的緩存機制,如使用HTML Meta 標簽,Web開發者可以在HTML頁面的<head>節點中加入<meta>標簽,代碼如下:

<meta http-equiv="Pragma" content="no-cache"> 

上述代碼的作用是告訴瀏覽器當前頁面不被緩存,每次訪問都需要去服務器拉取。使用上很簡單,但只有部分瀏覽器可以支持,而且所有緩存代理服務器都不支持,因為代理不解析HTML內容本身。

下面我主要介紹HTTP協議定義的緩存機制
  • Expires響應頭字段
    它的作用是在響應http請求時告訴瀏覽器在過期時間前瀏覽器可以直接從瀏覽器緩存取數據,而無需再次請求。
    例如:響應頭中Date頭域為:Date: Mon,31 Dec 2017 04:25:57GMT。Expires為:2017-11-28 03:30:01 ,則表明這個時間點之前,可以使用緩存文件。緩存5分鐘。
    不過Expires 是HTTP 1.0的東西,現在默認瀏覽器均默認使用HTTP 1.1,所以它的作用基本忽略。
  • Cache-control策略(重點關注)響應頭字段
    Cache-Control主要有以下幾種類型:
    1. 請求Request:
      [1] no-cache ---- 不要讀取緩存中的文件,要求向WEB服務器重新請求
      [2] no-store ---- 請求和響應都禁止被緩存
      [3] max-age: ---- 表示當訪問此網頁后的max-age秒內再次訪問不會去服務器請求,其功能與Expires類似,只是Expires是根據某個特定日期值做比較。一但緩存者自身的時間不準確.則結果可能就是錯誤的,而max-age,顯然無此問題.。Max-age的優先級也是高于Expires的。
      [4] max-stale ---- 允許讀取過期時間必須小于max-stale 值的緩存對象。
      [5] min-fresh ---- 接受其max-age生命期大于其當前時間 跟 min-fresh 值之和的緩存對象
      [6] only-if-cached ---- 告知緩存者,我希望內容來自緩存,我并不關心被緩存響應,是否是新鮮的.
      [7] no-transform ---- 告知代理,不要更改媒體類型,比如jpg,被你改成png.
    2. 響應Response:
      [1] public ---- 數據內容皆被儲存起來,就連有密碼保護的網頁也儲存,安全性很低
      [2] private ---- 數據內容只能被儲存到私有的cache,僅對某個用戶有效,不能共享
      [3] no-cache ---- 可以緩存,但是只有在跟WEB服務器驗證了其有效后,才能返回給客戶端
      [4] no-store ---- 請求和響應都禁止被緩存
      [5] max-age: ----- 本響應包含的對象的過期時間
      [6] Must-revalidate ---- 如果緩存過期了,會再次和原來的服務器確定是否為最新數據,而不是和中間的proxy
      [7] max-stale ---- 允許讀取過期時間必須小于max-stale 值的緩存對象。
      [8] proxy-revalidate ---- 與Must-revalidate類似,區別在于:proxy-revalidate要排除掉用戶代理的緩存的。即其規則并不應用于用戶代理的本地緩存上。
      [9] s-maxage ---- 與max-age的唯一區別是,s-maxage僅僅應用于共享緩存.而不應用于用戶代理的本地緩存等針對單用戶的緩存. 另外,s-maxage的優先級要高于max-age.
      [10] no-transform ---- 告知代理,不要更改媒體類型,比如jpg,被你改成png.

例如:web服務器返回的Cache-Control頭的值為max-age=300,即5分鐘(和上面的Expires時間一致,這個不是必須的)。

If-Modified-Since(Request)/Last-Modified(Response)

Last-Modified/If-Modified-Since要配合Cache-Control使用

  • Last-Modified:標示這個響應資源的最后修改時間。web服務器在響應請求時,告訴瀏覽器資源的最后修改時間。
  • If-Modified-Since:當資源過期時(使用Cache-Control標識的max-age),發現資源具有Last-Modified聲明,則再次向web服務器請求時帶上頭 If-Modified-Since,表示請求時間。web服務器收到請求后發現有頭If-Modified-Since 則與被請求資源的最后修改時間進行比對。若最后修改時間較新,說明資源又被改動過,則響應整片資源內容(寫在響應消息包體內),HTTP 200;若最后修改時間較舊,說明資源無新修改,則響應HTTP 304 (無需包體,節省瀏覽),告知瀏覽器繼續使用所保存的cache。
If-None-Match(Request)/Etag(Response)

Etag/If-None-Match也要配合Cache-Control使用。

  • Etag:web服務器響應請求時,告訴瀏覽器當前資源在服務器的唯一標識(生成規則由服務器覺得)。Apache中,ETag的值,默認是對文件的索引節(INode),大小(Size)和最后修改時間(MTime)進行Hash后得到的。
  • If-None-Match:當資源過期時(使用Cache-Control標識的max-age),發現資源具有Etage聲明,則再次向web服務器請求時帶上頭If-None-Match (Etag的值)。web服務器收到請求后發現有頭If-None-Match 則與被請求資源的相應校驗串進行比對,決定返回200或304。
既生Last-Modified何生Etag?

你可能會覺得使用Last-Modified已經足以讓瀏覽器知道本地的緩存副本是否足夠新,為什么還需要Etag(實體標識)呢?HTTP1.1中Etag的出現主要是為了解決幾個Last-Modified比較難解決的問題:

  • Last-Modified標注的最后修改只能精確到秒級,如果某些文件在1秒鐘以內,被修改多次的話,它將不能準確標注文件的修改時間
  • 如果某些文件會被定期生成,當有時內容并沒有任何變化,但Last-Modified卻改變了,導致文件沒法使用緩存
  • 有可能存在服務器沒有準確獲取文件修改時間,或者與代理服務器時間不一致等情形

Etag是服務器自動生成或者由開發者生成的對應資源在服務器端的唯一標識符,能夠更加準確的控制緩存。Last-Modified與ETag是可以一起使用的,服務器會優先驗證ETag,一致的情況下,才會繼續比對Last-Modified,最后才決定是否返回304。
基本轉自瀏覽器緩存機制寫得非常好,強烈推薦!

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容