google-chrome - 在 HTTP 请求中缓存 : ETag vs max-age

Question

我有一个 SPA，它使用来自后端服务器的一些静态 Assets 。由于某些原因，我选择了 ETag 验证作为缓存机制。简而言之，只要相关的 ETag 保持不变，我希望浏览器将 Assets 永远保存在其缓存中。

要向浏览器发出有关缓存的信号，标题 Cache-Control 必须出现在响应中。对我来说，这绝对是可以理解的，但让我感到困惑的是，我还必须在 header 中提供 max-age。换句话说，Cache-Control=public 不起作用，而 Cache-Control=public, max-age=100 是正确的 header 。

对我来说这听起来很矛盾。浏览器使用 If-Not-Match={ETag} 任何时间询问服务器以查看 Assets 是否已更改。那么这里的max-age有什么作用呢？

Answer 1

无论如何每次都会请求浏览器中带有 ETag 缓存的资源/文件。如果这是在服务器上更改的 *.js 文件，则服务器将发送带有新 ETag 的新版本，浏览器将刷新其缓存版本。但无论如何执行请求和响应的完整网络往返，这是非常昂贵的。如果您确实希望某些文件真的可以随时更改，那么您必须使用 ETag。

Cache-Control 是一个指示浏览器在 max-age 指定的一段时间内甚至不尝试检索更新版本的指令。这是更高效的。这对于可能不会更改的静态 Assets 很有用，例如jquery-3.1.js文件将始终相同。或者即使资源被改变也没什么大不了的，例如style.css.

在开发期间，当 Assets 经常更改时，Cache-Control 通常被禁用。

但是请注意 public 修饰符:这意味着资源可能会缓存在代理服务器(如 CloudFlare)上并在不同用户之间共享。如果资源有私有(private)信息，例如消息，然后用户可以看到彼此的数据。