禁用页面缓存不会禁用资源缓存？

Question

我使用 HTML meta 标记禁用缓存，直到我了解到这仅在文件在本地提供时才有效，因此我通过推荐使用标题禁用缓存，方法是将其放在页面顶部：

header("Cache-Control: no-cache, no-store, must-revalidate");
header("Pragma: no-cache");
header("Expires: 0");

我找不到答案，问起来可能很愚蠢，但这也不会禁用资源缓存，是吗？我在我的开发人员工具中查看网络选项卡，并注意到页面每次都在加载，但 CSS 和 Javascript 等资源仍在从缓存中加载，这让我相信阻止页面缓存并不意味着防止页面资源被缓存，但我不知道这是不是真的。所以我所做的是向资源添加一些版本控制，如下所示：

<link rel="stylesheet" href="css/style.css?version=1">

这阻止了资源被缓存，这是我想要的，但是在阅读了更多内容之后，似乎可以使用额外的标头来定位某些文件格式并阻止它们被缓存，这将产生相同的结果结果作为版本控制，尽管方式不同。

我对此的理解是否正确和/或混合方法是不好的做法？

Answer 1

您的观察和理解是正确的。例如，当您在 php 中设置缓存标头时，它们仅对该页面有效。从浏览器的角度来看：

• 请求页面 - 接收响应并指示不缓存它
• 解析收到的页面，获取资源（css、js、img等）的URI
• 为这些资源中的每一个发送请求 - 接收响应

如果在最后一个响应中没有标头告诉浏览器不要缓存它们，那么它们将按照标准规则进行缓存。

有多种方法可以防止缓存。一个正是您所描述的，即向请求的 URI 添加一个不断变化的参数 - 这样，每次请求它时，都会使用不同的参数请求它。它仍然会被缓存，但下一个请求不会匹配这个请求并且不会使用缓存。

另一个涉及更改网络服务器的配置以指示不应缓存特定类型的资源（文件名、扩展名、内容类型等）。例如，Apache 配置中的以下内容表明任何文件都不应该发生缓存：

<Files *>
    Header set Cache-Control: "private, pre-check=0, post-check=0, max-age=0"
    Header set Expires: 0
    Header set Pragma: no-cache
</Files>

请注意缓存的概念有两个方面：

• 允许客户端使用以前下载的资源本地副本更快地获得响应
• 通过提供更少的响应来降低服务器的负载

因此，请务必小心关闭缓存。如果您严重低估了需要处理的请求数量，您可能（在极端情况下）最终会杀死您的服务器。