骨架屏必须是服务端直出html中真实存在的节点，而非客户端js动态生成；其dom结构、class名、层级、数量须与真实内容完全一致，否则导致白屏→等待→骨架闪出→内容跳动的四阶段劣化体验。
骨架屏必须和服务端直出的HTML结构完全一致
骨架屏不是客户端 JS 拼出来的临时 div，它得是服务端吐给浏览器的第一帧 HTML 里就存在的真实节点。否则用户会经历「白屏 → 空白等待 → 骨架闪出 → 内容跳动」四阶段，比纯白屏更糟。
常见错误包括：
- 用
document.createElement('div')动态插入骨架，等 JS 加载完才渲染 - Vue/React 在
onMounted或useEffect里生成骨架，导致 hydration 前无 DOM - SSR 模板里写
v-if="loading"或{% if loading %}，造成服务端和客户端结构不匹配
正确做法是：在 SSR 模板中直接写出骨架节点，例如：
<div data-skeleton="true" class="card"> <header></header><figure></figure><div class="post-title"></div> </div>
所有标签名、class 名、data 属性（如 data-id）、嵌套层级，都必须和真实内容一模一样——差一个连字符或大小写，框架 hydration 就可能丢状态、重初始化、甚至触发重排。
文字与图片占位必须靠 CSS 显式撑开空间
90% 的骨架塌陷，是因为空元素没尺寸。浏览器把 <div class="skeleton-title"></div> 渲染成 0×0，后续真实内容插入必然跳动。
文字行不能靠 height: 2em 或 height: 100% —— em 值随字体浮动，父容器无高时 100% 无效。图片也不能靠 <img src="placeholder.png">，会触发 HTTP 请求或阻塞解析。
推荐写法：
- 三行摘要：设
line-height: 1.2，再用height: 3.6em（1.2 × 3） - 头像：
width: 48px; height: 48px; border-radius: 50%，严格对齐真实样式 - 卡片图：现代浏览器用
aspect-ratio: 16 / 9；旧版用padding-top: 56.25%+position: relative+ 子元素position: absolute - 所有骨架元素加
overflow: hidden，防止 shimmer 动画溢出圆角边界
加载完成后必须调用 element.remove() 销毁节点
只设 display: none 或 visibility: hidden 是最常被忽略的性能陷阱。动画持续运行、内存泄漏、IntersectionObserver 误判、页签后台耗电都会随之而来。
尤其在 SPA 中反复进出同一页面时，残留的骨架节点会让 @keyframes 不停循环，CPU 占用悄然升高。
关键操作点：
- 服务端骨架节点必须带可识别标记，如
data-skeleton="true"或aria-busy="true" - 真实内容插入后，用
skeletonEl.remove()彻底销毁整个节点 - 若用
replaceWith()，传入必须是 DocumentFragment 或真实 DOM 节点，禁用字符串拼接（否则事件监听器丢失、表单值清空） - Web Component 实现的骨架，需在
disconnectedCallback中清除定时器和requestAnimationFrame
内联 Critical CSS 并禁用阻塞资源
骨架屏要快，前提是 HTML 自身能快速解析渲染。如果骨架样式依赖外链 CSS，浏览器就得等 RTT 才能画第一帧 —— 这就违背了骨架存在的意义。
构建时必须做两件事：
- 只内联首屏必需样式（Critical CSS），用
critters等工具自动提取，注入<style></style>标签 - 禁止在内联
<style></style>中使用@import、@media（部分老浏览器不支持），CSS 变量也必须在内联块中声明
额外注意：<meta charset="UTF-8"> 必须放在 <title></title> 之前，否则某些 Android WebView 会乱码；<meta name="viewport"> 也要前置，避免缩放失效。
真正难的不是写几个灰色方块，而是让骨架和真实内容之间，连 0.1em 的行高差、1px 的边框偏移、一个 class 名的大小写都不允许存在 —— 否则用户看到的不是流畅，而是肉眼可见的“抖”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
