meta http-equiv="refresh"仅在指定时间后强制丢弃当前DOM、白屏并重新请求渲染，无过渡动画、不可拦截、不触发生命周期事件，也不支持占位逻辑；其本质是页面级硬重载，非UI控制机制。
meta http-equiv="refresh" 不是用来控制加载动画或占位的，它只做一件事：在指定时间后丢弃当前页面、重新请求并渲染——中间没有过渡、没有动画、没有占位逻辑。
为什么写 http-equiv="refresh" 后看不到“加载中”动画
浏览器解析到 <meta http-equiv="refresh" content="3"> 时，计时器立刻启动，但页面仍继续渲染；3 秒一到，当前 DOM 立刻被清空，白屏出现，然后发起新请求。这个过程不触发任何事件（如 beforeunload 或 pagehide），也没有回调时机让你插入 loading 状态。
- 你无法用 CSS 动画覆盖这个白屏阶段——它不是 DOM 渲染间隙，而是 DOM 被强制销毁后的真空期
- JS 也无法拦截：一旦标签被解析，刷新行为就不可取消、不可暂停
- 所谓“占位”，必须由开发者主动控制生命周期（比如先显示 skeleton，再 fetch 数据，最后替换内容），而
http-equiv="refresh"绕过了整个生命周期
content 值格式错误导致动画假象
常见误配：content="3; url=/loading.html"，本意是跳转前先展示 loading 页，但实际效果常是闪一下空白再加载——因为 /loading.html 自身若也含 refresh，就会陷入链式重载。
-
content中分号后必须紧贴url=，不能有空格：content="2;url=/status"✅，content="2; url=/status"❌（IE 和部分旧 WebView 会忽略） - 目标页若未禁用缓存，可能直接从 disk cache 加载，导致“动画”一闪而过，你以为是加载，其实是缓存命中
- 想模拟占位？得靠 JS：在
DOMContentLoaded后手动 show/hide 元素，而不是依赖 meta 标签
Chrome 93+ 对自动跳转的静默拦截会影响占位预期
若用户从未与页面交互（没点、没滚、没聚焦），Chrome 会阻止 http-equiv="refresh" 的跳转行为，但计时器照常走完——结果是：3 秒后页面没跳、没刷、也没报错，只留下一个“卡住”的假 loading 状态。
立即学习“前端免费学习笔记（深入）”；
- 这种拦截无 console 提示，Network 面板也看不到请求发出，调试时容易误判为网络问题
- 唯一可靠判断方式：打开 Application → Frames，看是否出现
about:blank子帧（被拦截时常见） - 服务端跳转（301/302）或 JS
location.replace()不受此限，但需确保首次交互已发生（哪怕只是document.body.focus()）
真正可控的占位逻辑，必须由 JS 主导生命周期：监听加载状态、动态切换 UI、支持取消与重试。而 http-equiv="refresh" 是个单向开关，按下就无法回头——它适合纯静态页的粗粒度轮询，不适合任何需要感知、响应或过渡的场景。
