hidden属性不能防FOUC，需CSS兜底[hidden]{display:none!important}和JS时机控制（如requestAnimationFrame）配合；异步组件中hidden字符串属性延迟生效导致FVC；iOS Safari下hidden元素focus受限。
hidden 属性本身不能防 FOUC，反而在异步组件中容易引发 Flash of Visible Content —— 必须配合 CSS 兜底和 JS 时机控制才能真正生效。
为什么直接写 hidden 在 Vue/React 动态组件里会闪一下
浏览器解析 HTML 时遇到 hidden 立即隐藏，但异步组件（如 v-if 切换、React.lazy 加载、innerHTML 插入）的 DOM 是 JS 运行时创建的，此时 hidden 只是字符串属性，不触发原生隐藏逻辑。元素先渲染出来，JS 执行 el.hidden = true 才隐藏，用户就看到“先出现再消失”。
- 常见错误：在 Vue
<template>里写<div v-if="show" hidden>...——v-if控制挂载，hidden在挂载后才被识别，中间有空档 - 真实场景：模态框用
fetch加载内容后appendChild，哪怕带hidden，插入瞬间仍可见 - 根本原因：FOUC 不是样式问题，是 DOM 渲染时机与属性生效时机错位
必须加的 CSS 兜底：[hidden] { display: none !important }
服务端直出或框架 hydration 前，仅靠 HTML 的 hidden 属性不可靠。浏览器可能先按默认样式渲染，等 CSS 加载完才应用隐藏。所以必须在最早加载的 CSS 文件里（比如 <head> 中的内联 style 或首屏 CSS）声明：
[hidden] {
display: none !important;
}
- 这个规则要尽可能早执行，不能等 CSS-in-JS 或动态注入的样式表
- 不用
!important时，若组件自带style="display: block"或类名覆盖，hidden会被忽略 - 不要写成
.hidden { display: none }—— 那是 class 控制，和原生hidden属性语义、可访问性行为都不一致
JS 控制 hidden 的正确时机和写法
异步组件挂载后，不能立刻设 el.hidden = true，得确认元素已真实渲染且未被其他样式干扰：
立即学习“前端免费学习笔记（深入）”；
- 用
requestAnimationFrame延迟一帧：requestAnimationFrame(() => el.hidden = true)，确保 layout 已完成 - 避免用
setAttribute('hidden', '')或removeAttribute('hidden')—— 它们不更新el.hidden的布尔值，后续el.hidden === false仍可能为true - 显示元素前，记得清空可能残留的
style="display: none"：el.style.display = ''，否则el.hidden = false也无效 - 检查是否真被隐藏：
el.offsetParent === null比getComputedStyle(el).display === 'none'更可靠（后者受 visibility 影响）
iOS Safari 下 focus + hidden 组合的特殊坑
如果异步组件里有个输入框，你希望它显示后自动聚焦，同时用 hidden 控制初始状态，iOS Safari 会直接拒绝 focus() 调用 —— 因为 hidden 元素不可聚焦，而它的 focus 限制又要求调用必须在用户手势同步上下文中。
- 错误做法：在
onMounted或useEffect里先设el.hidden = false，再el.focus()—— iOS 上静默失败 - 可行方案：把
focus()放在用户触发动作的回调里，比如模态框按钮的click事件中，且确保el.hidden = false和el.focus()在同一调用栈 - 绕过方式：用
el.setAttribute('tabindex', '-1')+el.focus()强制获取焦点，但需手动管理焦点流，不推荐用于表单主输入框
最易被忽略的一点：hidden 的语义是“完全退出渲染树和可访问性树”，一旦设为 true，它连 offsetParent 都是 null，很多基于 DOM 位置的判断会失效。如果你需要过渡动画或保留占位，别用 hidden，改用 opacity + pointer-events 配合 class 控制。
