為什么 Chrome 會使用 max-age header 請求已緩存的圖像？

Question

我的目標是將圖像緩存在瀏覽器的緩存中。

當前設置

Cache-Control: public, max-age=10368000 header 附加到請求的圖像以緩存圖像。

此外，還附加了ETag: f5f9f1fb39790a06c5b93735ac6e2397 header 以檢查達到max-age后圖像是否已更改。

當再次請求相同的圖像時，檢查if-none-match標頭的值以查看圖像是否已更改。 如果沒有，則返回304 。

我正在使用 Fiddler 檢查 http 流量（注意 - 下面描述的行為在 Fiddler 之前已經發生，所以這不是問題）

Chrome 版本 - 77.0.3865.90（官方版本）（64 位）

預期行為

我希望圖像會被緩存 10368000 秒。 除非經過 10368000 秒，否則每次請求都會從瀏覽器的緩存中提供圖像。 一旦 10368000 秒過去了，就會向檢查 Etag 的服務器發出請求。 如果服務器上的圖像沒有變化，則向客戶端返回 304，並將緩存時間延長到另外 10368000 秒。

使用谷歌瀏覽器的行為

1. 第一次請求圖像。 以下是請求標頭

2. 圖像成功返回，狀態為 200。 以下是響應標頭

Fiddler 告訴我們請求並提供了一張圖片

此外，在~/Library/Caches/Google/Chrome中可以看到圖像被緩存的事實，因為它出現在那里。

3. 我單擊瀏覽器中的鏈接欄，然后按 Enter再次請求圖像。 以下是請求標頭

4. 圖像返回成功，狀態為 304。 以下是響應標頭

提琴手告訴圖像是從緩存中提供的

為什么 Chrome 只在收到 304 響應后才對圖像發出額外請求並從緩存中提供它？

我看到第二次請求圖像時Cache-Control: max-age=0 request header 已設置。 據我了解，這意味着 Chrome 希望在提供緩存圖像之前重新驗證緩存圖像是否有效。 但為什么？

網上有人說Etag header 是 Chrome 確保圖像有效的原因。 即使我不包括Etag header，在第一個響應中也只有Cache-Control: public, max-age=10368000 ， Cache-Control: max-age=0存在於第二個請求的標頭中。

我也嘗試過排除公共，將其設為私有等。我還添加了Expires和Last-Modified對，帶和不帶max-age=10368000並獲得相同的行為。

此外，在開發工具中，我沒有檢查禁用緩存。 所以緩存是啟用的，這也是有意義的，因為圖像是在返回 304 之后提供的。

當我沒有單擊鏈接欄並按 Enter 鍵，而是按刷新箭頭又名 CMD + R 時，也會發生這種確切的行為。 如果我硬刷新 CMD + SHIFT + R，那么請求圖像就好像它是第一次請求它，這是有道理的。

Firefox 的行為

Firefox 完全按預期工作。

1. 第一次請求圖像。 以下是請求標頭

2. 圖像成功返回，狀態為 200。 以下是響應標頭

Fiddler 告訴我們請求並提供了一張圖片

此外，如果我 hover 超過響應狀態，那么它說 OK

3. 我單擊瀏覽器中的鏈接欄，然后按 Enter再次請求圖像。 以下是請求標頭

4. 圖像成功返回，狀態為 200。 以下是響應標頭

但是 Firefox 顯示它已被緩存。

此外，Fiddler 在第二個請求中沒有檢測到任何活動，因此圖像是從 Firefox 的緩存中提供的。 與 Chrome 不同，Chrome 向服務器發出另一個請求只是為了從它接收 304。

非常感謝您的時間和幫助。 我非常感謝它，並願意提供任何其他信息。 真的很期待你對此的看法。

祝你今天過得愉快：）

Answer 1

為什么 Chrome 只在收到 304 響應后才對圖像發出額外請求並從緩存中提供它？

因為你告訴它——不管你是否意識到。 當您向前和向后瀏覽時，將使用緩存的圖像，當您單擊刷新或 F5（MacOS 上的 Cmd R）或頁面時。 您明確要求 Chrome 仔細檢查該頁面是否仍然正確。 因此，當您單擊 URL 欄並單擊輸入時，Chrome 認為您這樣做的唯一原因是，您已經在 URL 上。 你必須要它檢查。

我看到第二次請求圖像時 Cache-Control: max-age=0 request header 已設置。 據我了解，這意味着 Chrome 希望在提供緩存圖像之前重新驗證緩存圖像是否有效。 但為什么？

正確的。 請參閱此問題的答案。 至於為什么-因為如上所述，您有 Chrome 想要刷新的信號。

還有緩存控制不可變 header ，旨在告訴瀏覽器在緩存中永遠不要重新獲取 - 即使在刷新時也是如此。

Firefox 完全按預期工作。

有趣的。 我其實很喜歡 Chrome 這樣做的方式。 當然是重新加載（F5/Cmd + R）。 感謝它讓您感到困惑（盡管現在您理解它希望不會那么混亂），但測試這不是常態，大多數人不會點擊 URL 欄然后在不更改 URL 的情況下按 Enter 鍵，除非他們想重新檢查當前與服務器的頁面。