HTTP 缓存与 F5 刷新的一个疑问

[HarryQu]

前言

最近在整理博客，发现了以前博客中 HTTP 缓存知识点与现在测试情况不一致，有点懵。

---

测试环境

目前的测试环境：Mac 系统，Chrome 版本为 90.0.4430.93

前提条件，浏览器访问图片，响应头中已经包含了 Cache-Control 相关字段：

Cache-Control: public, max-age=31536000，

Etag: "FpdKIr7zIHAUeJ1AKNV6x422vsq9"

Last-Modified: Sat, 30 Mar 2019 08:26:52 GMT

---

测试结果

1. 以前的博客中记录，刷新页面（ F5 刷新 /CMD+R ）后，请求头中会携带 If-Modified-Since 字段。但是我现在测试，发现请求头没有携带该字段，且图片直接从 Chrome 浏览器的 memory cache 中返回。

---

疑问

1. 为什么点击刷新后，请求头没有携带 If-Modified-Since 字段，很多博客说会携带？是不是某个版本后，浏览器改变了缓存策略？

[3dwelcome]

https://v2ex.com/t/740682

我也有疑问，但是没办法，浏览器缓存就是这样设计的。

[3dwelcome]

我测试下来，其实就是 max-age 影响浏览器缓存策略的。

要想确保每次都有 If-Modified-Since，就只能让 max-age 时间尽可能的短，我都是干脆设置成 0 。

[tabris17]

以前 ctrl+f5 强制刷新，忽略本地缓存。现在还是不是不清楚

[eason1874]

缓存分两种，一种会检查内容更新的缓存，一种是不会检查的缓存。

你写的 Cache-Control: public, max-age=31536000 在一年内只要缓存资源有效都会直接使用，不检查更新。

Cache-Control: no-cache 和 Cache-Control: max-age=0 才会在使用缓存前检查内容更新。

检查更新又分两种，一种是 If-Modified-Since 检查时间，一种是 If-None-Match 检查 etag 标识符，如果支持 etag 则会使用 etag 从而忽略时间检查。

所以你改成 Cache-Control: no-cache 就能看到浏览器 304 通过 If-None-Match 检查，然后把 etag 关掉就能看到通过 If-Modified-Since 检查。

[eason1874]

@3dwelcome #2 想要每次都检查更新，max-age 必须是 0，否则在指定时间内是不会发送请求的。

很多人误以为 no-cache 和 max-age=0 是禁用缓存，其实不是。这两个还是有缓存的，只是要求客户端与服务器进行验证，确认内容无更新后才可使用。真正禁用缓存的值是 no-store 。