浏览器缓存

Browser Cache

也常被叫作：缓存页面缓存改了没生效

网页与前端通常止于「运行时」约 2 分钟读完

你可能会这么说

「我改了页面，但打开还是旧的，是不是它把我旧的页面存下来了？」

浏览器缓存 Browser Cache

浏览器把访问过的网页资源存一份在本地，下次直接用旧的——省流量，但也让你看到旧页面。

浏览器为了省流量、加快打开速度，会把访问过的网页文件（图片、CSS、JS、甚至整个页面）存一份在本地。下次打开同一地址，它先问：「这份还能用吗？」如果服务器说「能用」（给了有效期，或返回 304），就直接用本地这份，根本不去下载新的。这就是「改了页面还看到旧的」的根源。

关键在服务器说了算：页面能缓存多久、什么情况下必须重新下载，由服务器返回的缓存头决定，不由你按刷新键决定。普通刷新（F5）有时会重新确认，但很多资源还是命中本地缓存；强制刷新（Ctrl+F5 / Cmd+Shift+R）才是「无视缓存，全部重新下载」；开发者工具里勾选「禁用缓存」，则整个调试期间都不缓存。

还有一层更容易漏的：缓存不止浏览器一级。 CDN 也缓存，公司或学校的代理也可能缓存。所以「我强制刷新了还是旧的」，问题可能根本不在浏览器——是服务器或 CDN 那层还存着旧文件。排查顺序：先强刷，再看开发者工具里这个请求的来源（from disk cache / from memory cache / 服务器返回），来源写着缓存，就说明根本没走到服务器。

长什么样真实可交互，不是截图

页面还是旧的？

打开开发者工具 → 网络标签 → 点那个文件，看「来源」这一列。

from disk cache     ← 用了磁盘上的旧文件
from memory cache   ← 用了内存里的旧文件
304 Not Modified    ← 服务器说：没变，继续用旧的
200（真实下载）      ← 这次才是真的新

强制刷新 Ctrl+F5普通 F5 可能还是旧的

判断依据永远看「来源」这一列，别猜。写着 cache 就是没走到服务器，跟你按了几次刷新键没关系。

拆开看，里面有这几块

1
缓存头 Cache headers
服务器返回的「能存多久、何时失效」指令。这是缓存行为的真正开关。
2
强缓存 Fresh
有效期内直接取本地，不发请求。表现为 from disk / memory cache。
3
协商缓存 Revalidate
发请求问服务器「变没变」，没变就返回 304 继续用旧的。
4
失效策略 Expiry
怎么让新版上线后用户不再拿到旧的——常见做法是文件名带版本号。

容易搞混？这样区分

浏览器缓存 ≠ CDN CDN

浏览器缓存存在你自己的电脑上；CDN 缓存存在中间的加速服务器上，全世界用户共享那一份。强刷只清得掉你本地的，清不掉 CDN 的。

看 CDN

浏览器缓存 ≠ 反向代理 Reverse Proxy

浏览器缓存由浏览器保管，反向代理缓存由服务器前面的一层保管。同样是「看到旧页面」，位置不同，排查手段也不同。

看反向代理

浏览器缓存 ≠ 刷新 Refresh

刷新是操作，缓存是机制。F5、Ctrl+F5、勾选禁用缓存是三种强度完全不同的操作，别以为刷新就等于拿到新的。

什么时候用得上

改了页面用户看不到

多半是缓存头没配版本号，旧文件被长期缓存。根治是文件名带版本号。

自己开发时看不到改动

用强制刷新或开发者工具禁用缓存，别在旧页面上调试半天。

上线后部分用户还是旧版

强刷只对你本机有效，其余用户和 CDN 那层要看缓存头策略。

你可以这样跟 AI 说

直接复制下面这段，把【】里的换成你的情况。它比一句「帮我加个 X」多说清楚了：改哪里、不许动啥、做完交什么。

【任务】排查「我改了 [页面 / 接口]，但 [环境] 上还是显示旧的」
【范围】只做排查和给修改建议，不要直接改生产环境
【目标】回答：
  1. 最可能卡在哪一层：浏览器 / CDN / 反向代理 / 服务器响应头
  2. 我该怎么自己确认：打开开发者工具的哪个标签、看哪个字段、什么值代表什么
  3. 如果要根治，改哪里（比如文件名带版本号、缓存头配置），给出具体配置
【边界】不要让我「把所有缓存清一遍」这种一刀切；不要给「换个浏览器试试」这种没信息量的建议；不确定的地方直接说需要看什么证据
【交付】
  1. 排查步骤，每步都有可见结果
  2. 诊断结论和依据
  3. 根治方案的具体配置

「每步都有可见结果」是排查类需求的核心：没有可见结果的步骤没法验证，AI 会一路猜到底。

它说「做好了」，你怎么自己验

这是本站的重头戏。AI 最会的不是写代码，是说「已完成」。这一条，它通常最多做到「运行时」这层：真的跑起来了，能在本机看到结果。

要亲眼看到这些，才算数

打开开发者工具的网络标签，刷新页面，找到那个文件，看「来源 / Size」列：写着 cache 就是在用旧文件。
强制刷新（Ctrl+F5 / Cmd+Shift+R）后，来源变成真实下载、内容变新。
在开发者工具里勾选「禁用缓存」再刷新，确认改动真实存在，排除缓存假象。
看该请求响应头里的 Cache-Control / Expires，确认是缓存策略在作怪。
本机已最新但线上还旧时，查 CDN / 代理层缓存——那层不受你强刷控制。

它常这么糊弄你

「刷新一下就好了」——普通刷新经常命中缓存，根本拿不到新的。让它说清是哪种刷新。
「应该是缓存问题」——没看任何证据的缓存诊断等于猜。要求看请求来源和响应头。
「我清过缓存了」——清的是哪个浏览器、哪个站点？别的浏览器、手机、CDN 的缓存你清不到。
「文件改好了，用户就能看到新的」——没处理缓存头或版本号，用户要等缓存过期。

缓存问题能验到「运行时」层：在开发者工具里亲眼看到请求来源和响应头就够了。要到「生产」层，还得覆盖 CDN、代理和真实用户的多种环境。

考考你选一个你觉得对的

你改了样式文件，用户反馈还是旧的；你自己强刷后已经是新的。最可能的原因？

想再深挖一点靠谱出处

HTTP 缓存（HTTP Caching）MDN ↗Cache-Control 响应头MDN ↗

# 浏览器缓存 (Browser Cache)

> 浏览器把访问过的网页资源存一份在本地，下次直接用旧的——省流量，但也让你看到旧页面。

**你可能会这么说**：我改了页面，但打开还是旧的，是不是它把我旧的页面存下来了？

浏览器为了省流量、加快打开速度，会把访问过的网页文件（图片、CSS、JS、甚至整个页面）存一份在本地。下次打开同一地址，它先问：「这份还能用吗？」如果服务器说「能用」（给了有效期，或返回 304），就直接用本地这份，根本不去下载新的。这就是「改了页面还看到旧的」的根源。 关键在服务器说了算：页面能缓存多久、什么情况下必须重新下载，由服务器返回的缓存头决定，不由你按刷新键决定。普通刷新（F5）有时会重新确认，但很多资源还是命中本地缓存；强制刷新（Ctrl+F5 / Cmd+Shift+R）才是「无视缓存，全部重新下载」；开发者工具里勾选「禁用缓存」，则整个调试期间都不缓存。 还有一层更容易漏的：缓存不止浏览器一级。 CDN 也缓存，公司或学校的代理也可能缓存。所以「我强制刷新了还是旧的」，问题可能根本不在浏览器——是服务器或 CDN 那层还存着旧文件。排查顺序：先强刷，再看开发者工具里这个请求的来源（from disk cache / from memory cache / 服务器返回），来源写着缓存，就说明根本没走到服务器。

**也叫**：缓存、页面缓存、改了没生效

## 你可以这样告诉 AI

```text
【任务】排查「我改了 [页面 / 接口]，但 [环境] 上还是显示旧的」
【范围】只做排查和给修改建议，不要直接改生产环境
【目标】回答：
  1. 最可能卡在哪一层：浏览器 / CDN / 反向代理 / 服务器响应头
  2. 我该怎么自己确认：打开开发者工具的哪个标签、看哪个字段、什么值代表什么
  3. 如果要根治，改哪里（比如文件名带版本号、缓存头配置），给出具体配置
【边界】不要让我「把所有缓存清一遍」这种一刀切；不要给「换个浏览器试试」这种没信息量的建议；不确定的地方直接说需要看什么证据
【交付】
  1. 排查步骤，每步都有可见结果
  2. 诊断结论和依据
  3. 根治方案的具体配置
```

## 怎么验证他真的做到了

通常止于层级：**运行时** — 真的跑起来了，能在本机看到结果

- [ ] 打开开发者工具的网络标签，刷新页面，找到那个文件，看「来源 / Size」列：写着 cache 就是在用旧文件。
- [ ] 强制刷新（Ctrl+F5 / Cmd+Shift+R）后，来源变成真实下载、内容变新。
- [ ] 在开发者工具里勾选「禁用缓存」再刷新，确认改动真实存在，排除缓存假象。
- [ ] 看该请求响应头里的 Cache-Control / Expires，确认是缓存策略在作怪。
- [ ] 本机已最新但线上还旧时，查 CDN / 代理层缓存——那层不受你强刷控制。

常见糊弄：
- 「刷新一下就好了」——普通刷新经常命中缓存，根本拿不到新的。让它说清是哪种刷新。
- 「应该是缓存问题」——没看任何证据的缓存诊断等于猜。要求看请求来源和响应头。
- 「我清过缓存了」——清的是哪个浏览器、哪个站点？别的浏览器、手机、CDN 的缓存你清不到。
- 「文件改好了，用户就能看到新的」——没处理缓存头或版本号，用户要等缓存过期。

来源：https://mickerbook.com/reference/t/browser-cache/