meta refresh 不具备倒计时显示能力，仅能无提示跳转或刷新；真倒计时需 JavaScript 实现，支持 DOM 更新、交互响应与状态校验。
meta 标签的 http-equiv="refresh" **没有倒计时显示能力**，它只做一件事：在指定秒数后无提示地跳转或刷新。所谓“倒计时”，必须用 JavaScript 实现。
为什么 meta refresh 不是真倒计时
它不渲染数字、不更新 DOM、不响应用户交互。浏览器解析到该标签就启动内部计时器，和页面是否可见、有没有表单正在输入完全无关。
-
content="3; url=/login"→ 3 秒一到，立刻丢弃当前页，载入/login - 用户刚点开页面，还在读“请稍候”，3 秒后直接消失 → 体验断裂
- 无法监听
visibilitychange，切到其他标签页照样跳 - Chrome 95+ 已禁用其 bfcache 支持，点「返回」大概率白屏
meta refresh 的唯一适用场景
仅限于 JS 不可用、或作为降级保底的极简跳转，比如维护页、旧 URL 迁移页。
- 必须放在
<head>内，且建议在<title>之前 -
content中分号;是硬性分隔符，不能用逗号或空格代替 - 秒数支持小数（如
"2.5; url=/home"），但实际精度取决于浏览器调度 - 不写
url=就是刷新当前页，不是跳转 —— 这是最常写错的一点
要真倒计时，得用 JavaScript 配合 window.location.replace()
核心是：自己控制计时器、更新页面文本、可中断、可校验状态。
立即学习“前端免费学习笔记（深入）”；
- 用
setTimeout启动跳转，比setInterval更轻量、不易累积误差 - 跳转前检查
document.activeElement，避免打断用户正在填写的表单 - 监听
document.addEventListener('visibilitychange')，切走时暂停计时器 - 用
window.location.replace()而非href，防止用户点「返回」回到跳转页 - 示例片段：
let countdown = 3; const timer = setInterval(() => { if (document.hidden) return; countdown--; document.getElementById('countdown').textContent = countdown; if (countdown <= 0) { clearInterval(timer); window.location.replace('/next'); } }, 1000);
真正上线时，别只靠 meta 标签。双保险才是常态：HTML 里放个 5 秒兜底跳转，JS 里做带 UI 和逻辑判断的倒计时 —— 后者负责体验，前者兜住 JS 失效的角落。最容易被忽略的是 visibilitychange 响应和表单焦点拦截，没加这两条，用户切走再切回，很可能发现倒计时已经归零闪跳了。
