骨架屏需用语义化空元素独立构建，层级、class、data属性须与真实节点一致；替换用replaceChildren()；动画用opacity过渡；父容器必加contain: layout防抖动。
骨架屏结构必须独立于真实内容容器
复用真实 DOM 节点（比如直接给 .title 加 opacity: 0）是常见错误。骨架屏不是“透明化真实元素”，而是用语义化空元素（<div>、<section>）独立构建一套轻量占位结构。否则 JS 替换时容易错乱、样式污染，或触发多余重排。
关键约束：
- 骨架节点必须和真实内容节点层级数量一致、
class名完全相同、data-*属性对齐（如data-testid） - 禁止在骨架上写伪文字、图片
src或alt，避免屏幕阅读器误读 - 服务端渲染（SSR）时，骨架结构应默认不输出；客户端 JS 激活后才注入，防止 SEO 和可访问性问题
replaceChildren() 是最稳妥的 DOM 替换方式
用 innerHTML = '' 清空再塞新 HTML、或用 display: none 切换，都会触发强制同步重排，造成“咔哒一跳”。replaceChildren() 是现代浏览器原生支持的原子操作，它只替换子节点，不销毁父容器，保留 focus 状态、事件监听器和 CSS 动画上下文。
兼容旧浏览器（如 Safari）需手动模拟：
立即学习“前端免费学习笔记（深入）”；
- 先执行
while (el.firstChild) el.removeChild(el.firstChild) - 再用
el.append(...newNodes)插入真实节点 - 注意：这种方式会丢失焦点，且无法保留已绑定的事件监听器
opacity 过渡比 display/visibility 更安全
display: none 让元素彻底退出文档流，visibility: hidden 虽保留空间但无法触发 CSS transition。只有 opacity 配合 pointer-events: none 能兼顾平滑性和交互隔离。
实操建议：
- 骨架元素默认设
opacity: 0.8+transition: opacity 0.25s ease-out - 真实内容插入后立即设
opacity: 1，并移除所有skeleton类名 - 禁用
will-change: opacity——它在低端设备上反而引发额外合成层开销
容器必须加 contain: layout 防止布局抖动
最容易被忽略的是父容器的 contain: layout 样式。没有它，即使骨架和真实内容结构同构、替换用 replaceChildren()、动画用 opacity，仍可能因外部样式变化（如字体加载、图片尺寸回填）导致父容器重排。
这个声明告诉浏览器：“这个容器内部的布局变化，不会影响外部”。它能锁住布局边界，让骨架过渡真正稳定。
别只盯着动画和替换逻辑——contain: layout 才是骨架屏不“跳”的最后一道防线。
