replaceChildren()是唯一能避免“咔哒一跳”的DOM替换方式，它原子化替换子节点、保留focus状态与事件监听器；必须确保骨架与真实结构同构，配合contain: layout和opacity过渡才能实现平滑过渡。
replaceChildren() 是唯一能避免“咔哒一跳”的 DOM 替换方式
直接用 innerHTML = '' 清空再塞新 HTML，或靠 display: none 切换显隐，都会触发强制同步重排。用户看到的就是内容“啪”一下弹出来，甚至下方模块跟着跳动。这不是动画没写好，是 DOM 操作本身错了。
现代浏览器原生支持 replaceChildren()，它只替换子节点，不销毁父容器——这意味着 focus 状态、已绑定的事件监听器、CSS 动画上下文全都能保留。过渡过程真正原子化。
- 必须确保骨架节点和真实节点层级数量一致、
class名完全相同、data-testid等属性对齐 - 旧版 Safari 不支持？手动模拟：先
while (el.firstChild) el.removeChild(el.firstChild)，再el.append(...newNodes)；但注意这会丢失焦点，且无法保留监听器 - 千万别在骨架节点上提前绑定
click或mouseenter——切换瞬间可能触发两次
contain: layout 是防抖动的最后一道防线
即使结构同构、替换用 replaceChildren()、动画用 opacity，页面仍可能“跳”。最常被忽略的原因，就是父容器缺了 contain: layout。
这个声明告诉浏览器：“这个容器内部的布局变化，不会影响外部”。字体加载、图片尺寸回填、第三方脚本注入等外部扰动，就再也不会导致父容器重排。
立即学习“前端免费学习笔记（深入）”；
- 它不是可选优化，而是骨架屏稳定过渡的必要条件
- 不要写成
contain: strict或contain: paint——只有layout能锁住布局边界 - 如果用 CSS-in-JS 或 Shadow DOM，需确认该样式确实作用到了最外层容器上
骨架结构必须和服务端输出 HTML 完全同构
SSR 场景下，骨架屏若和服务端返回的真实 DOM 结构不一致，hydration 就会失败。React/Vue 控制台报 Hydration failed，用户看到的是空白块或错位内容。
所谓“同构”，是指节点层级、class 名、顺序、数量，一个都不能差。比如真实卡片是 <article class="card"><h2 class="card-title">...，骨架就得是同样 class 的 <article><h2>，而不是另起一套 skeleton-card 类名。
- 禁用
height: 100%——父容器无高度时它坍缩为 0，骨架“消失”；改用固定值或aspect-ratio - 图片占位统一用
<div class="skeleton-img"></div>，别用<img src="data:">，后者仍触发解码逻辑 - SSR 模板中骨架结构必须首段 flush 输出，不能等整个模板渲染完才
res.end()
opacity 过渡必须配合 pointer-events: none 和类名清理
只写 opacity: 0 → 1 不够。骨架元素默认要设 opacity: 0.8 + transition: opacity 0.25s ease-out，真实内容插入后立即设 opacity: 1，并立刻移除所有 skeleton-* 类名。
否则残留类名可能干扰后续样式，或者让屏幕阅读器误读占位结构。同时，骨架期间必须加 pointer-events: none，否则用户可能点到灰块上却没反应，造成困惑。
- 禁用
will-change: opacity——低端设备上反而引发额外合成层开销 - 不要用
visibility: hidden占位：它无法触发 CSS transition，且仍参与无障碍树 - 真实内容插入后，必须同步移除骨架类名，不能只靠 CSS 隐藏
真正难的从来不是写动画，而是让骨架结构、DOM 替换、容器约束、服务端输出四者严丝合缝。漏掉任意一环，平滑过渡就变成视觉抖动。
