document.querySelector('.new-button')返回null的根本原因是HTML未更新：浏览器缓存了旧index.html，仍引用旧JS文件，导致新DOM结构未加载。需确保HTML走协商缓存、JS用hash命名并配immutable头，同时排查CDN和Service Worker干扰。
HTML缓存机制本身不延迟脚本更新，但会阻止新脚本被加载——因为旧 HTML 仍引用着旧文件名，浏览器压根不会发起对新 JS 的请求。
为什么 document.querySelector('.new-button') 总是 null
这不是 JS 执行错了，而是你根本没加载到含 .new-button 的新 HTML。浏览器从磁盘缓存读取了旧 index.html，里面还是 app.abc123.js，而你部署的是 app.def456.js。旧 JS 里没有新 DOM 结构，自然查不到。
- Network 面板中
index.html显示200 (from disk cache)，且无时间戳 → 强缓存生效 -
app.js请求 URL 没变（比如仍是/app.js），哪怕服务端已替换成新内容，浏览器也不会重下 - CDN 把
/index.html当静态资源缓存了 1 年，覆盖了源站的Cache-Control头
必须让 index.html 每次都“问一次服务器”
HTML 文件不是静态资源，它是版本入口。它必须走协商缓存，不能靠强缓存省那几十毫秒。
- 服务端响应头设为
Cache-Control: no-cache, must-revalidate或max-age=0，强制触发If-None-Match/If-Modified-Since验证 - Nginx 示例：
location = /index.html {<br> add_header Cache-Control "no-cache, must-revalidate";<br>} - CDN（如 Cloudflare）必须单独配置
/index.html路径规则，禁用缓存或设 TTL=0；别让它被“Cache Everything”兜底 - 别信
<meta http-equiv="Cache-Control" content="no-cache">—— 它只对 HTML 文档自身生效（且部分浏览器忽略），对后续script和link加载的资源完全无效
JS/CSS 文件名不变 = 更新永远不落地
构建工具输出的 JS 文件名如果固定为 app.js，就算你改了代码、重新部署，浏览器也认为“URL 没变”，直接复用缓存。
立即学习“前端免费学习笔记（深入）”；
- Webpack/Vite 必须启用 contenthash：生成类似
app.a1b2c3.js的文件名，并自动注入到 HTML 的<script>标签中 - 手写版本参数（如
app.js?v=2.3.1）风险高：v 值不随内容变，CDN 可能忽略查询参数，且无法利用浏览器对 immutable 资源的优化 - 确保服务器对带 hash 的 JS/CSS 返回
Cache-Control: public, max-age=31536000, immutable—— 这样浏览器连 F5 都不发验证请求，真正“一次缓存，永久有效”
Service Worker 会让问题更隐蔽
一旦注册了 SW，它可能在 HTTP 缓存之前就拦截并返回了过期的 index.html 或 JS，导致 Ctrl+F5 都无效。
- 检查
caches.keys()，确认缓存名是否带版本（如pages-v2.1.0），而非写死的pages -
install阶段必须调用cache.addAll(['/', '/app.a1b2c3.js'])，把新 HTML 和新资源一并写入新缓存桶 -
activate阶段清理旧缓存前，先执行clients.claim()，否则当前页面仍由旧 SW 管理 - 本地调试时，可在 DevTools → Application → Service Workers 中勾选 “Update on reload”，避免手动 unregister
最常被忽略的一点：缓存行为由每个资源各自的 HTTP 响应头决定，不是由 HTML 里的 meta 或 JS 控制的。你看到的“脚本没更新”，90% 情况下是 index.html 卡在旧版本，而不是 JS 文件本身没缓存好。
