骨架屏HTML占位结构必须与真实DOM同构且语义一致，使用相同标签名、核心class及aria-hidden="true"等可访问性属性，SSR时直出并避免动态class和循环模拟，确保hydration不 mismatch。
骨架屏 HTML 占位结构怎么生成才不被 SSR 渲染打断
直接在服务端渲染（SSR）中插入骨架屏 HTML，最常踩的坑是：占位结构被 Vue/React 的 hydration 逻辑误判为“已有 DOM”，导致首屏闪烁或节点 mismatch。关键不是画得多像，而是让骨架结构和后续真实 DOM 在 v-if / key / data-testid 层级上保持可映射性。
- 骨架节点必须和真实组件使用相同的父容器标签名、class 名（至少保留核心 class，如
article-card），否则 hydration 会丢弃整个子树 - 避免用
<div>套<div>模拟段落——真实结构若是<p><span>...</span></p>，骨架也得是<p><span class="skeleton-text"></span></p> - SSR 模板中骨架结构需包裹在条件注释或占位指令里（如
<!--# if env == 'loading' -->...<!--# endif -->），而非靠 JS 动态插入，否则 Node.js 端无法输出
如何用正则 + AST 双路提取真实 DOM 结构生成骨架 HTML
纯正则容易挂（比如匹配嵌套 <div> 时漏掉属性），但全 AST 解析又太重。折中做法是：先用 parse5 或 htmlparser2 构建轻量 AST，只遍历到 class 含 content / item / list 的节点，再对每个目标节点做结构投影。
- 文本节点 → 替换为
<span class="skeleton-text"></span>，保留原line-height对应的height行内样式 - 图片节点 → 替换为
<div class="skeleton-img" style="aspect-ratio:16/9"></div>，优先读取原width/height或style中的aspect-ratio - 列表项（
<li>）→ 保留父<ul>或<ol>，但把每个<li>内容清空，加data-skeleton="true"标记，方便客户端区分
为什么不能直接用 CSS opacity:0 或 visibility:hidden 模拟骨架
这类方式看似简单，但实际破坏了骨架屏的核心价值：占位与流式布局。浏览器仍会解析并计算真实内容尺寸，导致 layout shift（CLS 分数飙升），且无障碍阅读器仍会播报隐藏内容。
-
opacity:0的元素仍参与 document flow，但骨架需要的是“视觉占位但语义隔离”——所以必须用空元素 + 高度/宽度假设（如min-height:1.2em） -
visibility:hidden不触发重排但保留空间，问题在于它无法阻止焦点进入或屏幕阅读器朗读，不符合 WCAG 2.1 要求 - 真正合规的做法是：骨架节点用
aria-hidden="true"+tabindex="-1"+ 纯视觉占位元素（<div class="skeleton-block"></div>）
服务端生成骨架 HTML 时怎么处理动态 class 和数据绑定
真实模板里常有 class="card {{ status }}" 或 v-bind:class="{ active: isActive }"，骨架生成器若照抄会导致 class 不稳定，hydration 失败。
立即学习“前端免费学习笔记（深入）”；
- 静态 class（如
card、user-avatar）必须保留；动态部分（如{{ status }}）一律剔除，不拼接、不猜测 - 遇到
v-if或v-for，骨架结构只生成单例（一个<div class="item">...</div>），不模拟循环次数，否则 SSR 输出和客户端首次 render 的节点数对不上 - 所有绑定属性（
:src、:alt）统一替换为字面量占位值，例如src="/placeholder.svg"、alt="loading content"
骨架屏不是越精细越好，而是越“可预测”越好。最难的部分从来不是画形状，而是让服务端吐出的那段 HTML，在客户端 hydration 的第一帧里，刚好能被框架认作“同一棵树”的初始状态。
