不推荐使用——它不可控、无法暂停、破坏bfcache，chrome95+已限制缓存；其倒计时从html解析即开始，chrome93+静默拦截无用户交互跳转，content格式错（空格/逗号）、路径解析错误均导致失效。
别用 <meta http-equiv="refresh"> 做自动刷新——它不可控、无法暂停、破坏 bfcache、Chrome 95+ 已限制缓存，现代项目里基本该禁用。
为什么 <meta http-equiv="refresh"> 会失效或被拦截
它从 HTML 解析器碰到标签那一刻就倒计时，不管 DOM 是否加载完、用户是否正在输入。Chrome 93+ 对无用户交互的跳转（比如 content="2; url=/login"）静默拦截，控制台不报错，页面就卡住；content 值含空格或逗号（如 "5, url=/a" 或 "5; url= /a"）会被旧版 WebView 直接忽略；相对路径按 HTML 文件位置解析，不是地址栏当前 URL，容易跳到 404。
setTimeout + location.reload() 怎么写才可靠
把刷新逻辑交给 JS，才能判断“现在能不能刷”。基础写法只是起点，必须加防护：
- 在
DOMContentLoaded后启动，避免 DOM 还没就绪就清空页面 - 用
document.hidden监听visibilitychange，切到后台时clearTimeout，切回来重设 - 检查
document.activeElement是否为<input>或<textarea></textarea>，有焦点就跳过本次刷新 - 用
sessionStorage存上次刷新时间戳，防止页面意外重载后立即再次触发 - 全局变量存定时器 ID：
let refreshTimer，便于清理
用 setInterval 轮询比整页刷新更轻量，但必须清理
整页刷新会导致表单丢失、Canvas 清空、WebSocket 断开、滚动位置重置。轮询接口 + 局部更新才是合理选择：
- 每 60 秒
fetch('/api/status')，只在响应含{ needs_reload: true }时调用location.reload() - 定时器 ID 必须存在模块级变量里（不能写在函数内），否则每次执行都新建一个
- 在
beforeunload事件中调用clearInterval(refreshTimer)，否则用户离开页面后请求仍在后台发 - SPA 路由切换时（如 Vue 的
beforeRouteLeave、React Router 的useEffectcleanup），也要主动清除
点击按钮刷新页面，type="button" 是关键
很多人写 <button onclick="location.reload()"></button> 却包在 <form></form> 里，结果一点就触发表单默认提交，根本没执行 reload。解法很简单：
<button type="button" onclick="location.reload()">刷新</button>- 如果必须用
type="submit"，JS 中要加event.preventDefault() - 需要带参数刷新？
location.reload()不改变 URL，得用location.href = location.origin + location.pathname + '?t=' + Date.now()强制新请求
真正难的不是怎么触发刷新，而是判断“该不该刷”：数据是否真变了、用户是否正编辑、后端能否扛住请求频率——这些没法靠一行 <meta> 解决。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
