hidden属性在骨架屏加载初期失效是因为其同步生效特性与js动态插入或css过渡时机冲突，导致dom已渲染时hidden被过早移除而闪现；应改用style="display: none"配合domcontentloaded移除，并结合opacity/visibility过渡及监听编辑器就绪事件控制显示时机。
为什么 hidden 属性在骨架屏加载初期会失效
因为 hidden 是同步生效的布尔属性，一旦 HTML 解析到该标签就立即隐藏——但骨架屏往往依赖 JS 动态插入或 CSS 过渡触发，此时 DOM 已渲染、hidden 却被过早移除或覆盖，导致闪现。关键不是“加不加 hidden”，而是“什么时候移除它”。
用 display: none + JS 控制比纯 hidden 更可靠
直接写 style="display: none" 在骨架屏容器上，再配合 DOMContentLoaded 或 requestIdleCallback 移除，能避开渲染流水线竞争。尤其当骨架屏由编辑器组件（如 monaco-editor 或 slate）动态挂载时，hidden 容易被框架内部逻辑覆盖。
- 避免写
<div hidden></div>后又用 JS 做el.removeAttribute('hidden')—— 框架可能重绘时重新应用该属性 - 推荐初始状态：
<div id="skeleton" style="display: none"></div> - 移除时机选
document.addEventListener('DOMContentLoaded', ...)而非window.onload，后者等资源全部加载完，骨架屏可能已延迟太久
配合 CSS 动画过渡避免硬切
单纯从 display: none 切到 display: block 会跳变。用 opacity 和 visibility 组合更稳妥，且不影响布局流：
/* 初始隐藏 */
#skeleton {
opacity: 0;
visibility: hidden;
transition: opacity 0.2s ease, visibility 0.2s;
}
/* 显示时 */
#skeleton.show {
opacity: 1;
visibility: visible;
}
- JS 中只操作 class：
document.getElementById('skeleton').classList.add('show') - 不要用
setTimeout延迟显示——编辑器初始化耗时不可控，应监听其就绪事件，比如monaco.editor.onDidCreateModel或自定义的editorReady事件 - 若骨架屏本身含 SVG 或字体图标，需确保
@font-face加载完成后再 show，否则出现图标空白
服务端渲染（SSR）场景下 hidden 的陷阱
如果 HTML 是服务端吐出的，且骨架屏也由 SSR 渲染，那客户端 JS 执行前用户已看到骨架——此时加 hidden 反而让骨架屏不可见，违背初衷。真正要隐藏的是“未就绪的编辑器内容区域”，而非骨架屏本身。
- 服务端只输出骨架结构，不加
hidden；客户端 JS 加载后，先给真实编辑器容器加hidden，再等初始化完成才移除 - 错误做法：
<div hidden>骨架</div> <div id="editor"></div>→ 骨架根本没机会展示 - 正确做法：
<div id="skeleton">骨架</div> <div id="editor" hidden></div>，JS 初始化完成后editorEl.removeAttribute('hidden')并skeletonEl.remove()
骨架屏是否“可见”取决于它和编辑器真实内容的交接时机，而不是某个属性开关。最容易被忽略的，是把 hidden 当成万能遮罩，却没考虑它和框架生命周期、CSS 渲染层、资源加载顺序之间的耦合。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
