meta http-equiv="refresh"从解析到标签起即启动倒计时，非等待页面加载完成；必须置于中且仅首个生效，content="5"刷新当前页，content="3;url=..."跳转，路径按HTML文件位置解析，不可控、易白屏、遭现代浏览器拦截。
meta http-equiv="refresh" 的基本写法和生效时机
它不是“等页面加载完再开始倒计时”，而是从 HTML 解析器碰到该 标签那一刻起就启动计时。哪怕 DOM 还没构建完、JS 还没执行，只要标签被解析，倒计时就开始了。
必须写在 里，且只认第一个有效的 http-equiv="refresh"；后面重复的会被忽略。
-
content="5"：5 秒后刷新当前页（不跳转） -
content="0; url=/login"：立即跳转到/login（注意：0 秒实际有约 100ms 延迟，Chrome 不会真“瞬间”） -
content="3; url=https://example.com"：3 秒后跳转到外部地址
路径解析始终以当前 HTML 文件所在 URL 为基准，不是当前地址栏显示的 URL。比如你用 JS 改过 location.href，url=../admin 仍按原始 HTML 路径算。
为什么 meta 刷新常导致表单丢失、AJAX 中断或白屏
它本质是强制丢弃整个页面生命周期：DOM 被清空、所有未完成的 fetch 请求被取消、正在输入的 内容直接消失、WebSocket 连接断开——浏览器把它当成了用户手动按了 F5。
- 常见错误：在监控页里写
，结果用户刚点开一个下拉菜单，10 秒一到直接刷新，菜单收起、筛选状态清零 - 更隐蔽的问题：页面加载慢（比如首屏要 8 秒），而
content="5"已触发，此时刷新发生时 DOM 可能只渲染了一半，出现空白或错位 - Chrome 95+ 对含该标签的页面禁用 bfcache，用户点返回时不是秒开，而是重新加载，体验断层
Chrome 93+ 对自动跳转的静默拦截规则
如果你写了 content="2; url=/dashboard"，但用户从未与页面交互（没点、没滚、没聚焦 input），Chrome 会直接忽略跳转，页面卡住不动，控制台也无报错——这是策略性静默，不是 bug。
- 判断依据是
document.hasFocus()和document.visibilityState === 'visible'是否同时成立 - 即使页面获得焦点，如果是在后台 tab 中恢复可见，部分版本仍会拦截（尤其
content中秒数 ≤ 3 时） - 相对路径如
url=admin/和url=/admin行为不同：admin/是相对路径，/admin是绝对路径；写错可能导致跳转到 404
替代方案：用 setTimeout + location.reload() 控制更稳
真正需要可控刷新时，别硬扛 meta。JS 方式能感知用户状态、可取消、可延迟、可埋点。
- 基础写法：
setTimeout(() => location.reload(), 30000)（30 秒后刷新） - 防打断输入：
if (!document.activeElement?.matches('input, textarea')) location.reload() - 切出暂停：
document.addEventListener('visibilitychange', () => { if (document.hidden) clearTimeout(timer) }) - 避免重载即刷：
if (sessionStorage.getItem('lastRefresh') > Date.now() - 30000) return，再存新时间戳
唯一要注意的是：服务端若禁 JS（如某些政务内网 IE11 终端），meta 才是兜底选择——但这种情况正快速消失，别把它当默认路径。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
