瀏覽器緩存機制之一(經典緩存)

因為在接手的項目中用到過比較新的HTML5應用緩存，也用到了經典的緩存如設置max-age，Etag之類，而之前一直就是在用著沒有去深究其中原理。周末天氣不好，懶得出去了，正好找時間總結下。

1.關于瀏覽器緩存

記得去年看《HTTP權威指南》的時候，有一章是專門講瀏覽器緩存的，一年時間過得太快，逝去的時光還真是如同人群中消失的好姑娘，眼看她嫁給別人。我這里把瀏覽器緩存分為經典的瀏覽器緩存(以下簡稱為經典緩存)和HTML5應用緩存這兩類。

經典的瀏覽器緩存其實主要由幾個響應變量來設置，如Cache-Control(設置max-age指定文檔處于新鮮期的秒數)，Pragma(Pragma主要用于HTTP1.0，HTTP1.1用Cache-Control)，Expires(不推薦，因為它指定的是過期的絕對日期而不是相對秒數)，Etag和Last_Modified。其中Etag則對應請求頭部中的If_None_Match(簡寫為INM)，Last_Modified對應If_Modified_Since(簡寫為IMS).新的HTML5應用緩存則是支持離線存儲文檔，使得文檔數據離線有效，節省了流量，在移動端使用的較多。

2.經典緩存

默認情況下apache對文檔內容如html，圖片，css等會在響應中加Etag以及Last_Modified。這樣下次請求的時候會帶上INM以及IMS，如果文檔內容沒有修改，那么返回304 Not Modified，然后就可以從緩存中取之前緩存的文件了；如果文檔從那個時間點后修改過了，那么返回200和文檔的新內容。下面分別用apache來測試下cache-control，expires，INM以及IMS的效果。

2.1 Cache-Control和Expires

我的apache版本為2.4.10，配置如下，我設置了html文件的Cache-Control，以及Expires，同時禁用了Last-Modified響應頭部和Etag。

FileETag none

Header set Cache-Control "max-age=3600"

ExpiresActive On

ExpiresByType text/html A20

Header unset Last-Modified

我的index.html文件如下:

測試瀏覽器緩存

測試文字

測試圖片

這就設置了html文件響應加上cache-control響應頭，如同下面這樣：

Accept-Ranges:bytes

Cache-Control:max-age=3600

Connection:Keep-Alive

Content-Length:29

Content-Type:text/html

Date:Mon, 09 Mar 2015 14:17:20 GMT

Expires:Mon, 09 Mar 2015 14:18:20 GMT

Keep-Alive:timeout=5, max=100

Server:Apache/2.4.10 (Ubuntu)

那么可以看到響應頭既有Cache-control又有Expires，而且這兩個值我故意設置的不一樣，這個時候以哪個值為準呢？在chrome下面實驗結果表明Cache-control優先級要高，也就是如果使用期小于新鮮期3600秒，則在地址欄訪問index.html頁面的時候會直接從緩存中取。

注意這里chrome有個問題，就是如果在同一個tab下面訪問index.html，不管有沒有過期，都不會從緩存中取，而當你打開一個新的tab訪問，則緩存機制生效，具體原因不明，可能跟chrome內部緩存策略有關。比如這里有人提出相同的問題。

2.2 Last-Modified/If-Modified-Since 和 Etag/If-None-Match

這幾個標記可以配合Cache-Control使用。

- Last-Modified:標示響應文檔的最后修改時間。

- If-Modified-Since(IMS)：當文檔過期時(比如使用期超過了Cache-Control指定的max-age)，如果該響應文檔有Last-Modified的響應頭部，則會在請求時帶上IMS頭部，值為服務器文檔的最后修改時間。

Etag：web服務器響應請求時，返回Etag頭部用來告知瀏覽器該文檔在服務器的唯一標示。apache中Etag是對文件的Inode，大小以及最后修改時間mtime進行hash后得到。

If-None-Match(INM)：當文檔過期時，瀏覽器請求會帶上INM頭部，內容為Etag值。web服務器會比對Etag值并決定返回304還是200.

對2.1中的配置注釋掉FileTag none和

Header unset Last-Modified

即可開啟Etag和Last-Modified響應頭部。

如果在請求頭部中IMS和INM都存在，服務器會優先驗證INM，只有INM匹配成功后才會繼續比對IMS。

2.3 既有IMS何生INM

根據《http權威指南》上面的描述，之所以存在IMS還要INM主要是有如下幾個原因：

- 有些文檔可能會被周期性重寫，但是實際包含的數據常常是一樣的。盡管內容沒有變化，但是修改日期會發生變化。

- 有些文檔可能被修改了，但是所做修改并不重要，不需要讓世界范圍的換成都重新裝載數據。

- 有些服務器無法準確判斷頁面最后修改時間。

- 有些服務器提供的文檔會在毫秒間發生變化，而這個對服務器以秒為粒度的修改日期就不夠用了。

3.用戶行為與緩存

用戶行為也會影響瀏覽器緩存機制。比如你F5會導致Expires/Cache-control無效，用CTRL+F5(某些系統中是Shift+F5)除了Expires/Cache-control外，還會導致Etag/Last-Modified失效。

4.參考資料

瀏覽器緩存機制

《HTTP權威指南》

Is Chrome ignoring Control-Cache: max-age?

總結

以上是生活随笔為你收集整理的浏览器会不会缓存html,浏览器缓存机制（一）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。