7v.技术分享
← 返回教程库

网站更新了,为什么还显示旧版

区分页面、静态资源和中间缓存,用版本化地址解决更新错位。

网站实践 · 更新于 2026年10月26日

适用环境
网站维护者;以普通静态站点为例

浏览器可能拿到新旧混合内容

首页 HTML、样式文件和脚本是分别请求的。首页已经更新,浏览器却继续复用同一个 style.css 地址的旧内容,就可能出现“文字换了,排版没换”或按钮功能缺失。网站加速服务、反向代理和 Service Worker 也可能参与缓存。

先在 Network 里找证据

打开开发者工具的 Network,刷新后检查文档、CSS 和 JS 的实际请求地址。观察缓存来源、Cache-Control、ETag 和 Last-Modified;再打开 Disable cache 对照。不要先清空所有 Cookie,缓存问题通常不需要把登录信息一并删除。

给改动过的资源换地址

<link rel="stylesheet" href="assets/style.css?v=1.2.0">
<script defer src="assets/config.js?v=1.2.0"></script>

查询参数适合小型静态网站。前提是中间缓存没有忽略查询参数;若加速服务使用特殊缓存规则,需要一起核对。更稳定的发布方式是内容文件名带摘要,例如 style.4a8c.css,内容变化就生成新名字。摘要这里只是格式示意。

让 HTML 可重新验证

location = /index.html {
    add_header Cache-Control "no-cache";
}

这是已有 Nginx 站点 server 内的片段,不是完整配置。no-cache 允许存储,但复用前需要验证;no-store 才是要求不要存储。ETag 或修改时间可帮助服务器在内容未变时返回 304。首页“/”的最终匹配要根据 index 和现有 location 规则检查。

发布顺序也会影响结果

先上传新资源,再更新引用它们的 HTML;保留上一版带摘要的资源,给已经打开的旧页面继续使用。最后从浏览器确认页面引用的新地址实际返回新版内容。强制刷新适合排查,资源地址管理才是维护者应完成的发布工作。

官方参考资料

接着探索

网页加载慢,打开 Network 看一眼 ↗Nginx 安装 HTTPS 后怎么验收 ↗