设置了Cache-Control:max-age=3600后页面还是频繁请求CSS文件？

UX佳丽提问于 2026-02-11 08:01:10 阅读 15

优化

在开发中，我给CSS文件设置了HTTP头Cache-Control: max-age=3600，但发现每次刷新页面时，浏览器都会重新请求该文件。明明应该缓存一小时才对啊！

尝试过清除浏览器缓存后再访问，之后确实不再请求，但正常情况下应该直接用缓存才对。服务器配置是Nginx，确认过响应头确实有max-age=3600。难道还有其他因素影响缓存？

我的CSS文件内容如下，可能和缓存有关吗？


body {
  background-color: #f0f0f0;
}
.header {
  padding: 20px;
}

我来解答赞 8 收藏

反馈

1 条解答

敏涵 ☘︎ Lv1

我之前踩过这个坑，看着是缓存没生效，其实八成是刷新方式搞错了。

你设置了 max-age=3600 是对的，浏览器确实会缓存 1 小时。但问题出在“每次刷新页面”这个操作上 —— 如果你是按 F5 或者点击刷新按钮，这属于“强制刷新”的一种，浏览器会忽略强缓存，重新向服务器发请求验证资源是否过期（这时候会带 If-Modified-Since 或 ETag）。

真正能体现缓存效果的操作是：

- 正常跳转访问页面（比如输入网址回车、从别的网站链接进来）
- 或者关掉标签页再重新打开
- 而不是反复点刷新

你可以打开开发者工具，看网络请求那里的 Size 列：
如果显示的是 memory cache 或 disk cache，说明缓存命中了；
如果显示 304 Not Modified，那是协商缓存生效了，也没下载完整内容；
只有返回 200 并且真实下载了文件，才是真的没缓存。

另外建议你在 Nginx 配置里加上 expires 1h 和确保没有其他干扰头，比如 Cache-Control: no-cache 被后端覆盖之类的。

总结：你的缓存很可能早就生效了，只是被自己的刷新姿势骗了。换个方式访问页面，看看是不是真的还请求 CSS。

2026-02-11 08:01