骨架屏html必须与ssr真实dom完全同构，标签名、class名、属性须严格一致，css需显式撑开尺寸，骨架节点须彻底销毁而非隐藏，否则将导致hydration失败、lcp恶化及体验断点。
高并发 Web 应用里，HTML 代码质量不是“写得规范就行”，而是直接决定骨架屏能否稳住首屏、不触发重排、不拖慢 hydration。骨架屏若结构错位或尺寸漂移，反而放大白屏焦虑——这不是锦上添花，是性能底线。
骨架屏 HTML 必须和服务端真实 DOM 完全同构
常见错误是 SSR 返回真实卡片 <article class="post-card"><header><h2>...</h2></header><figure><img></figure></article>，而骨架却用 <div class="skeleton-post"></div> 一锅炖。结果 hydration 失败，React/Vue 报 Hydration mismatch，内容闪一下再重绘，LCP 恶化。
- 骨架节点标签名必须一致：
<header></header>就不能换成<div>，<code><figure></figure>不能降级为<div> <li>核心 class 名（如 <code>post-title、card-image）大小写、连字符、命名空间全等，一个字母都不能差 - 若真实节点带
data-id="123"或aria-label，骨架也得带上，否则框架认为“不是同一个节点” - SSR 模板中骨架要随首段 flush 输出，不能等整个模板渲染完才
res.end()；Express 场景下用res.write()分段发 - 文字行：用
line-height× 行数，例如三行摘要 →height: 3.6em（假设line-height: 1.2） - 图片：现代浏览器优先用
aspect-ratio: 16 / 9；兼容旧版用padding-top: 56.25%+position: relative+ 子元素position: absolute - 所有骨架元素加
overflow: hidden，否则 shimmer 动画会溢出圆角边界 - 禁用伪元素（
::before/::after）模拟文字块，它们无法继承line-height，高度不可控 - 服务端吐出的骨架节点必须带明确标识，如
data-skeleton="true"或aria-busy="true" - 真实内容加载完成，必须调用
element.remove()彻底销毁整个骨架节点 - 若用
replaceWith()，确保传入的是DocumentFragment或真实 DOM 节点，避免字符串拼接丢失事件监听器 - 切换时用
replaceChildren()替换子节点，而非清空再append()，减少 layout thrashing
图片和文字占位必须靠 CSS 显式撑开，禁用 height: 100%
骨架塌陷的根源，90% 是浏览器把空元素渲染成 0×0。height: 100% 在父容器无高时无效，<img src="data:"> 仍触发解码逻辑拖慢主线程。
骨架 DOM 必须被销毁，而非隐藏
用 v-show、display: none 或 opacity: 0 留着骨架，它仍在布局计算、占用无障碍树、干扰 IntersectionObserver 判断，甚至导致内存泄漏。
真正难的不是写出骨架，而是让骨架在 SSR hydration、CSS containment、移动端弱网、无障碍读屏之间保持零偏差——任何一处松动，都会在高并发流量下被瞬间放大成体验断点。
