静态网站生成器中html骨架动态插值必须在domparser解析前完成：先对原始模板字符串（如{{title}}）用正则或ast替换为骨架占位符，再传入parsefromstring；禁止在解析后操作节点或使用innerhtml赋值，须保留class、aria-hidden="true"、tabindex="-1"等属性以保障hydration一致性与可访问性。
静态网站生成器（SSG）里做 HTML 骨架动态插值，不是往模板里塞变量那么简单——关键在于插值时机必须早于 HTML 解析、晚于结构定义，否则 DOMParser 会把未解析的占位符当语法错误丢掉，或导致 hydration mismatch。
插值必须在 parseFromString 之前完成
很多开发者误以为可以在解析后的 Document 上用 querySelector 找到占位符再替换，但这样会破坏骨架与真实 DOM 的结构一致性。真实流程是：先对原始 HTML 字符串做插值，再交给 DOMParser。
- 错误做法：
document.body.innerHTML = htmlString后再操作节点 → 污染当前页面，且无法隔离 SSR 场景 - 正确路径：拿到原始模板字符串（如
<div class="card">{{title}}</div>），用正则或轻量 AST 替换{{title}}为<div class="skeleton-line medium"></div>，再传给new DOMParser().parseFromString(...) - 注意：插值符号不能和 JSX/模板引擎冲突，比如 Vue 的
{{ }}和 SSG 自带的{{ }}混用会导致预处理失败
避免使用 innerHTML 直接赋值做骨架注入
innerHTML 虽然写起来快，但在骨架生成环节会跳过语义校验、丢失 aria-hidden="true" 和 tabindex="-1" 等可访问性属性，且无法控制 CSS 内联时机。
- 常见错误现象：
container.innerHTML = skeletonHtml→ 屏幕阅读器仍朗读骨架内容，CLS 分数飙升 - 替代方案：用
document.importNode导入解析后的 Document 片段，再 append 到目标容器，确保节点属性完整继承 - 性能影响：直接
innerHTML在大量骨架节点时触发多次重排；importNode+DocumentFragment可批量插入，减少 layout thrashing
插值后必须保留 class 和 aria-hidden 属性
骨架节点不是装饰品，它是 hydration 过程中与真实组件对齐的“锚点”。删掉 class 或忽略 aria-hidden="true"，Vue/React 就会认为这是不可复用的 DOM，强制重新挂载。
- 真实结构是
<article class="post-item" data-testid="post">...</article>→ 骨架必须是<article class="post-item" aria-hidden="true" tabindex="-1"></article> - JSX 预处理时需过滤掉
onClick、v-if等运行时属性，但class、data-testid、role必须透传 - 如果 SSG 使用 Liquid 或 Nunjucks，插值模板里要显式写出
aria-hidden="true"，不能依赖 JS 后置添加
真正难的不是怎么插，而是插完之后怎么让骨架节点既“看不见”又“可对齐”——它得被浏览器当成真实结构的一部分，但又不能参与交互或语义播报。漏掉 tabindex="-1" 或错用 visibility:hidden，都会在 Lighthouse 可访问性检测里直接扣分。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
