如何实现网页更新自动检测提示_html缓存控制

最直接方案是轮询index.html并比对script标签src路径：用fetch加时间戳防缓存，DOMParser解析HTML后提取script[src]转Set做差集比较，间隔设5–10分钟，监听页面可见性暂停轮询，检测到变化后提示用户刷新而非自动重载。

浏览器不会自动告诉你页面更新了，必须自己加逻辑检测 HTML 内容变化，否则用户可能一直卡在旧版本里，直到手动强刷或清缓存。

fetch('/?t=xxx') 轮询 index.html 是最直接的方案

核心是比对当前页面的 <script> 标签 src 是否和服务器最新 HTML 里的不一致。Webpack/Vite 打包后 JS 文件名带 hash，只要脚本路径变了，基本就代表有新版本。

• 每次请求加时间戳（如 /?timestamp=1744574220345）防止被浏览器或 CDN 缓存住
• 用 DOMParser 解析返回的 HTML 字符串，再用 querySelectorAll('script[src]') 提取所有带 src 的脚本路径
• 把路径转成 Set 后做差集比较，比字符串全文比对更稳定（避免注释、空格、换行等干扰）
• 轮询间隔建议设为 5–10 分钟；太短（如 2 秒）会浪费请求，太长（如 1 小时）可能错过关键更新

别信 ETag / Last-Modified，它们常被服务端逻辑拦住

很多 Nginx 或 Node.js 中间层默认开启协商缓存，但返回 304 Not Modified 时，前端根本收不到新内容，自然无法触发更新判断。

• 检查 Network 面板中 HTML 请求是否真返回了 200 和新响应体；如果看到 304，说明服务端没放行
• 强制禁用协商缓存：fetch 时加 cache: 'no-cache'，并手动加请求头 Cache-Control: no-cache
• 某些 CDN（如 Cloudflare）会忽略客户端 Cache-Control，得在后台关掉“智能缓存”或给 /index.html 单独配缓存策略为 no-store

页面不可见时要暂停轮询，否则白跑还耗电

用户切走标签页、最小化窗口、锁屏时继续发请求，既无意义又影响性能，尤其在移动端会明显增加耗电。

立即学习“前端免费学习笔记（深入）”；

• 监听 document.hidden 变化，配合 visibilitychange 事件控制定时器启停
• 恢复可见时，别立刻重试，先延后 1–2 秒再 fetch，避免和页面初始化抢资源
• 不要依赖 setInterval 硬轮询；改用 setTimeout 链式调用，方便随时中断和重置

swapCache() + reload(true) 是过时写法，别再用了

window.applicationCache 在 Chrome 95+、Firefox 92+ 已彻底移除，且它只适用于老旧的 manifest 方案，和现代打包部署完全不兼容。

• 现在所谓“更新”，本质是 HTML 文件内容变了，不是缓存清单变了
• 检测到差异后，弹窗提示比自动刷新更稳妥；window.location.reload(true) 会丢掉表单输入、滚动位置、WebSocket 连接等上下文
• 如果非要自动刷新，至少加个延迟（如 30 秒倒计时），并允许用户点击按钮提前触发

真正难的不是写几行 fetch，而是让检测逻辑在各种网络环境、CDN 配置、浏览器休眠策略下都可靠运行——尤其是那个看似无害的 304 响应，最容易被忽略，也最常导致“明明发版了，用户就是不更新”。