“我明明修改了 CSS，怎么刷新页面看不出来？”

这个问题，每个前端开发者至少遇到过一百次。

第一次遇到时，我以为自己没保存。确认保存了，还是没变。然后我按了个 Ctrl+F5——好了。

一句话理解： F5 是”有缓存的刷新”，Ctrl+F5 是”放弃所有缓存，全新加载”。

F5 和 Ctrl+F5 有什么区别

F5 Ctrl+F5
是否检查缓存 ✅ 是 ❌ 忽略所有缓存
资源加载 大部分返回 304（使用缓存） 全部返回 200（全新下载）
加载速度 快 慢一些
适用场景 日常刷新 调试修改后的代码 
1
2
3
4
5
6
7
8
9
F5 刷新：
图片 A → 服务器返回 304 Not Modified → 浏览器使用缓存
样式 B → 服务器返回 304 Not Modified → 浏览器使用缓存
脚本 C → 服务器返回 304 Not Modified → 浏览器使用缓存

Ctrl+F5 刷新：
图片 A → 服务器返回 200 OK → 重新下载
样式 B → 服务器返回 200 OK → 重新下载
脚本 C → 服务器返回 200 OK → 重新下载

经验之谈： 我以前改 CSS 从来不按 Ctrl+F5——改了十几次都看不到效果，最后发现自己其实一直在看缓存版本。从那天起我养成了一个习惯：“改完代码先 Ctrl+F5，再 F5。” 先强制刷新确认改对了，然后正常刷新看看缓存服务是否正常。

什么时候该用 Ctrl+F5

  • 调试前端代码时：修改了 CSS/JS/图片后，确认效果
  • 遇到奇怪的问题时：先 Ctrl+F5 排除缓存因素
  • 查看最新版本的网站时：比如刚部署了更新

什么时候不该用

日常浏览时不需要按 Ctrl+F5——它会让所有资源重新下载，加载速度会变慢。F5 已经够用了。

DevTools 中的缓存控制

比 Ctrl+F5 更精细的方式是直接在开发者工具中控制缓存：

1
Chrome DevTools → Network 面板 → 勾选 "Disable cache"

勾选后，只要 DevTools 是打开状态，所有请求都不会使用缓存。这比每次 Ctrl+F5 方便多了。

缓存相关的 HTTP 头

理解 Ctrl+F5 的原理，需要知道这几个 HTTP 头：

1
2
3
4
5
6
7
8
9
10
# 强缓存：在过期前，浏览器不会向服务器发送请求
Cache-Control: max-age=31536000
Expires: Tue, 24 Jul 2027 00:00:00 GMT

# 协商缓存：每次请求都问一下服务器"文件变了没"
Last-Modified: Tue, 24 Jul 2026 10:00:00 GMT
ETag: "abc123"

# 不缓存
Cache-Control: no-cache, no-store, must-revalidate

关于缓存的详细解释，我在性能优化实战指南中有更多说明。

相关推荐

P.S. 我现在按 Ctrl+F5 的频率远低于从前了——因为大部分时间开着 DevTools，勾选了 Disable cache。但每次给别人演示改代码后看不到效果时，我还是会帅气地按下 Ctrl+F5，然后说：”看，这是强刷魔法。”