为什么即使存在Cache-Control头部信息，Chrome也不缓存响应？

Question

我正在尝试理解Chrome缓存的时间和它如何决定缓存什么。例如，我访问了这篇新闻文章并打开了DevTools。 https://www.nextgov.com/ideas/2020/07/so-much-decentralized-internet/167281/ 我已确保启用了缓存（即未选中“禁用缓存”）。

当我刷新页面时，167281/的调用会再次发生。它没有从缓存中检索到。尽管响应设置了cache-control头部，但这仍然是事实。

为什么Chrome不会在页面上缓存这个（以及其他许多资源）？

- CodyBugstein

---

我遇到了类似的问题，PageSpeed Insights在审核“使用高效缓存策略提供静态资产”时显示资源，即使它们已经设置了一年的缓存控制标签。 - Miguel Mateo

@MiguelMateo，也许你为HTML页面设置了一年的缓存控制标签，但没有为静态资源（图像、CSS文件、.js库）设置。 - Daniel Mitre

Answer 1

服务器返回HTTP状态码304，意味着告诉浏览器它的缓存仍然有效，并且应该使用它。

引用自https://developer.mozilla.org/en-US/docs/Web/HTTP/Caching: 当进行验证请求时，服务器可以忽略验证请求并响应一个普通的200 OK，或者返回304 Not Modified（空正文）指示浏览器使用其缓存的副本。后一种响应还可以包括更新缓存文档过期时间的标头。

- Don Ha

---

那么为什么浏览器不遵循这个指令并使用缓存版本呢？ - CodyBugstein

如果您在网页浏览器上单击刷新/重新加载按钮或按下F5热键，这将触发网页浏览器上的“软刷新”，其中它将与Web服务器进行检查以查看文件是否已修改。如果已修改，则网页浏览器将拉取文件的最新版本；如果未修改，则网页浏览器将继续使用缓存版本。软刷新仅需要很少的带宽来检查文件的HTTP响应标头，以确定文件是否已修改。 阅读更多：https://www.raymond.cc/blog/refresh-webpage-with-soft-or-hard-reload-in-web-browsers/ - Don Ha

Answer 2

当你设置cache-control: max-age=...时，你告诉请求者可以安全地缓存这个资源这么长时间。

但每个浏览器（或应用程序）决定何时实际缓存。移动浏览器可能只缓存小型资源，而桌面浏览器可能会做相反的事情。

在Firefox Developer Edition 80.0b5中给出你的示例后，经过一些重新加载，页面开始缓存，并将请求缓存控制更改为if-modified-since。这意味着浏览器已经缓存了资源，但会查询服务器以检查它是否仍然是最新的。如果是这样，服务器（或某些中介网络路由器）将只返回一个没有实际内容的304响应，这正是你展示的情况。

但是当我在URL栏中按下回车键或使用导航按钮时，缓存会被使用，而不需要任何实际请求：

需要注意的是，缓存控制是提示而不仅限于实际请求者：中间代理也会使用这些信息缓存响应并使下一个请求加载更快。即使主资源（HTML页面）被缓存，页面中链接的所有资产都有自己的 cache-control 标记。

dev-tools上的“已传输”列似乎可以更好地显示资源是否有效地在本地缓存。

- Daniel Mitre

---

那么在我的情况下，如果它收到了 304 状态码，为什么它还会发起一个新的请求呢？ - CodyBugstein

在 304 结果（带有空主体）之后，您不会为此资源发出新请求。但是，所有链接的资源（图像、CSS、JS 库）或从页面动态请求的资源（ping、数据收集）都会发生相同的过程。 - Daniel Mitre

谢谢！你能在回答中更清楚地表达吗？我没有理解到调用实际上没有在响应中获取内容。 - CodyBugstein