页面更新后,怎么排查浏览器缓存
从网络面板找到具体资源,再用响应头区分缓存复用和部署遗漏。
把问题缩小到一个请求
假设刚调整了首页样式,刷新后颜色看起来没变。打开开发者工具的「网络」面板并刷新,先找到 HTML 文档,再找到它加载的样式文件。记下两个请求的完整地址、状态码和响应头,看看 HTML 是否仍在引用旧文件。
保留这次普通刷新的结果,再勾选网络面板里的「停用缓存」重试。这个开关通常在开发者工具打开时生效,适合做对照。
观察响应头和文件内容
Cache-Control: max-age=600 表示响应在指定条件下有 600 秒新鲜期。带有 ETag 的响应可用来校验缓存。浏览器携带相同版本标记向服务器验证时,如果服务器确认内容未变,可以返回 304 Not Modified,浏览器继续使用已保存的内容。
curl -I https://example.com/
curl -I https://example.com/assets/site.css
把 example.com 替换为自己的站点。在 Windows PowerShell 中可用 curl.exe。-I 返回响应头。如需核对文件内容,用浏览器的「响应」面板或普通 GET 请求查看。
让下一次更新更容易确认
静态站可给变更后的样式和脚本分配新的文件名,同时让 HTML 使用需要重新验证的缓存策略。上传新资源后再发布引用它的 HTML,并保留仍被旧页面引用的资源一段时间。上线后核对新 HTML 中的路径和该路径的响应,把改动是否生效落实到一次可重复的访问。