网站已经上传了新文件，浏览器打开后却还是旧首页；CSS 明明修改了，页面样式没有变化；普通窗口显示旧版，无痕窗口却能打开新版。
遇到这些情况，需要先确认旧内容来自哪里。浏览器缓存、Service Worker、CDN，以及服务器实际运行的版本，都可能影响最终看到的页面。
本文以桌面版 Chrome 为例，按照“确认现象、检查浏览器、检查网站入口、验证更新结果”的顺序排查。
1. 先判断哪些访问方式会显示旧页面
首先，在普通窗口、无痕窗口和另一台设备上，打开同一个完整网址。
注意核对协议、域名、路径和跳转后的地址。例如，带 www 和不带 www 的域名，可能进入不同的站点配置。
可以根据观察到的现象，选择排查方向：
| 现象 | 优先检查的方向 |
|---|---|
| 普通窗口显示旧版，无痕窗口显示新版 | 本地缓存、站点数据、登录状态和扩展差异 |
| 禁用浏览器 HTTP 缓存后恢复正常 | 浏览器缓存与资源缓存策略 |
| 绕过 Service Worker 后恢复正常 | Service Worker 版本与缓存更新逻辑 |
| 多台设备都显示旧页面 | 网站发布结果、CDN缓存和访问入口 |
无痕窗口正常，只能帮助缩小排查范围。
普通窗口与无痕窗口的 Cookie、登录状态、站点存储和扩展运行情况可能不同，因此不能仅凭这一项现象，就认定一定是某一种缓存出了问题。
2. 操作前准备
开始排查前，建议准备：
- 出现问题的完整网址。
- 一个能辨认新旧版本的变化，例如标题、按钮文字或图片。
- 一台安装 Chrome 的电脑。
- 需要排查服务器或 CDN 时，对应的管理权限。
如果页面包含尚未提交的表单、草稿或离线编辑内容，应先保存或导出，再进行后面的站点数据清理。
单纯检查浏览器缓存，不需要重新安装网站，也不需要调整服务器配置。
如果需要为网站改版准备独立的测试环境，可以使用莱卡云 Linux 云服务器进行操作。
查看官网购买链接： https://www.lcayun.com
9折优惠码：bloglcayun
3. 检查浏览器 HTTP 缓存
先在显示旧页面的普通窗口中操作。
3.1 临时禁用缓存并刷新
- 打开需要检查的网页。
- 打开 Chrome 开发者工具。Windows 可以按
F12，macOS 可以按Option + Command + I。 - 切换到 Network（网络） 面板。
- 勾选 Disable cache（停用缓存）。
- 保持开发者工具打开，刷新网页。
这个选项在开发者工具打开期间生效。若页面此时恢复正常，可以优先检查浏览器 HTTP 缓存及网站的资源缓存策略。
需要注意，停用 HTTP 缓存不能代替 Service Worker 排查，后者在第4节单独处理。
3.2 查看实际返回的资源
在 Network 面板中，点击主页面请求，查看：
- Headers： 请求地址、状态码和响应头。
- Response： 实际返回的 HTML 内容。
- CSS、JS 请求： 文件地址和内容是否属于新版本。
如果只有页面中的数据没有更新，还应查看对应的 Fetch/XHR 请求，确认接口返回的是不是旧数据。
不要只看到状态码 200，就认为已经加载了新版。还需要核对页面文字、资源文件名或实际响应内容。
3.3 返回304是不是缓存故障？
304 Not Modified 表示条件请求的验证结果允许客户端继续使用已有副本，本身属于正常的缓存协商机制。
如果文件确实已经更新，但验证结果仍让客户端使用旧内容，就需要继续检查部署位置，以及 ETag、Last-Modified 等验证信息是否与实际资源一致。
4. 检查 Service Worker 和 Cache Storage
部分网站会使用 Service Worker 实现离线访问或资源缓存。站点改版、替换项目后，如果旧脚本或缓存更新逻辑没有处理好，浏览器可能继续使用旧资源。
4.1 临时绕过 Service Worker
在开发者工具中：
- 打开 Application（应用） 面板。
- 点击左侧的 Service Workers。
- 查看是否存在与当前页面相关的注册记录。
- 如果存在，勾选 Bypass for network。
- 保持第3节的 Disable cache 开启，再刷新页面对比。
Bypass for network 用于绕过 Service Worker，让相关资源请求走网络。若这样操作后恢复正常，可以把排查重点放在 Service Worker 的版本和资源处理逻辑上。
没有相关注册记录时，可以跳过这一节。
4.2 处理确认遗留的旧缓存
对于已经确认不再使用的旧项目注册，可以点击对应记录的 Unregister。
接着打开：
Application → Cache Storage
检查缓存中的资源地址，删除确认属于旧项目的缓存项。Cache Storage 与浏览器普通 HTTP 缓存是不同的存储机制，需要分别检查。
完成后，关闭该站点的其他标签页及已安装的网页应用窗口，再重新访问。
清理前应保存离线内容，并核对缓存所属项目。同一来源下的多个应用可能共享存储范围。
如果重新访问后又出现旧脚本或旧资源，应继续修正网站发布和 Service Worker 更新逻辑。手动清理当前电脑，只能解决当前浏览器的问题。
5. 必要时清理当前站点的数据
如果 HTTP 缓存和 Service Worker 已经检查过，但仍只有某个浏览器环境显示异常，可以进一步检查站点保存的状态。
例如，Cookie 可能关联不同的登录状态，Local Storage 或 IndexedDB 可能保存旧配置及本地数据。
清理这些数据可能退出登录，并删除本地草稿、偏好设置或离线内容。操作前先保存需要保留的数据。 Cookie 被删除后，网站可能要求重新登录。
在 Chrome 中可以按以下步骤处理：
- 打开目标网站的开发者工具。
- 进入 Application → Storage。
- 确认页面显示的是准备处理的站点来源。
- 核对清理选项，只勾选需要清理的数据类型。
- 点击 Clear site data，然后重新打开网站。
同一域名下不同路径的应用也可能受到影响，清理前应核对范围。Chrome 的 Application 面板提供了站点存储和缓存清理功能。
重新登录后，再检查页面是否更新。如果仍异常，还可以临时停用会修改网页内容的浏览器扩展，进行对比。
6. 多台设备都显示旧页面，检查服务器和CDN
当多个浏览器、不同设备都显示旧页面时，应继续检查网站实际发布到了哪里，以及公网入口返回了什么。
6.1 确认运行的确实是新版
常见情况包括：
- 修改了源码，但没有重新构建前端文件。
- 新文件上传到了其他目录。
- 反向代理仍然连接旧服务。
- Docker 容器仍运行旧镜像。
- 网站程序或缓存插件仍返回旧页面。
使用 Docker 部署的网站，可以参考本站：
重点核对当前服务读取的目录、挂载路径和镜像版本，再检查公网实际返回的内容。
6.2 刷新受影响的CDN资源
如果源站已经返回新版，但经过 CDN 访问仍然得到旧内容，可以按实际 URL 刷新受影响的缓存资源。
例如，本次更新涉及：
https://www.example.com/
https://www.example.com/assets/style.css
https://www.example.com/assets/app.js以上都是示例地址，操作时应替换为真实网址。
HTML、CSS 和 JavaScript 是不同的资源。只刷新首页，不一定会同时刷新它引用的样式和脚本。
以 Cloudflare 为例，可以在缓存配置中的 Purge Cache 选择 Custom Purge，再按 URL 提交需要清理的地址。使用自定义缓存键时，还需按其规则处理；如果网址会跳转，也要核对最终页面的 URL。
刷新 CDN 后，仍需回到浏览器验证。CDN 清理与本机缓存清理属于不同环节。
6.3 网站迁移后核对入口指向
如果最近迁移过网站，还应检查：
- 域名的 A、AAAA 记录。
- CDN 的回源地址。
- 带
www与不带www的域名。 - HTTP、HTTPS 的跳转目标。
需要对比指定服务器和当前公网入口时，可以参考本站：
先确定访问到了预期环境，再判断是不是缓存问题。
7. 如何减少网站更新后仍显示旧内容
清理缓存可以帮助恢复访问，长期维护还需要合理设置资源更新策略。
7.1 经常更新的HTML入口
对于需要及时检查更新的 HTML，可以根据业务需求设置：
Cache-Control: no-cacheno-cache 允许保存响应，但要求缓存再次使用之前进行验证。
因此，它适合需要及时验证是否更新的页面入口。
7.2 带内容哈希的静态资源
对于内容变化时会生成新文件名的静态资源，例如：
/assets/app.8b42e1.js
/assets/style.5c91a7.css可以配合较长的缓存时间：
Cache-Control: max-age=31536000, immutable前提是同一个资源 URL 对应的内容保持不变。
发布新版时，应由构建流程生成新文件名，并让 HTML 引用新版资源。这样，浏览器便会请求新的 URL。
7.3 不应被缓存保存的响应
对于确实不应被 HTTP 缓存保存的响应，可以使用：
Cache-Control: no-store它用于阻止存储当前响应，但不会自动删除此前已经保存的旧副本。
这些响应头需要通过实际使用的应用、Web 服务器或 CDN 配置。修改后，应在 Network 面板的 Headers 中核对最终返回结果。
如果网站使用 Service Worker，还应单独维护其缓存版本和更新逻辑。
8. 验证结果与结语
完成处理后，取消勾选 Disable cache 和 Bypass for network，关闭开发者工具，再用普通窗口重新访问。
建议确认：
- 页面文字、图片和样式已经更新。
- 关闭网页后重新打开，仍然显示正确版本。
- 另一台设备访问时，关键内容一致。
- 登录、导航和主要功能正常。
如果只有开启调试选项时才能看到新版，说明正式访问路径仍有问题，需要继续处理。
网站更新后还是旧页面，可以先根据访问现象缩小范围，再分别检查浏览器 HTTP 缓存、Service Worker、站点数据，以及服务器和 CDN。
发布时让 HTML 及时验证更新、静态资源使用正确的版本地址，并做好缓存刷新和功能验证，能够减少用户持续访问到旧页面的情况。
