骨架屏必须复用真实组件的断点逻辑与栅格规则，动态生成匹配 display、class 和盒模型的 html；构建时静态提取模板结构，禁用运行时 js 渲染；ssr 下确保服务端与客户端 class 一致且 hydration 时机准确；文本图片占位须严格对齐真实渲染度量。
骨架屏结构必须复用真实组件的断点逻辑
静态写死一套骨架 HTML，在移动端会溢出、错列，根本原因不是 CSS 没写媒体查询，而是骨架没跟着真实布局的栅格规则走。比如一个 Card 组件在桌面端用 grid-template-columns: repeat(3, 1fr)，在移动端用 flex-direction: column，那它的骨架节点也得按同样规则生成 —— 不能只靠 @media (max-width: 768px) 缩放宽度。
实操建议：
- 提取真实组件的 CSS 类名（如
card-grid-3、card-stack），在骨架生成时原样复用，让骨架节点参与同一套 CSS 规则计算 - 避免给骨架元素设固定
width或height，改用aspect-ratio+min-height组合，保证比例稳定且不塌陷 - 列表类骨架要根据接口返回长度动态生成，但容器级骨架（如页眉、侧边栏）应直接复用组件模板的断点 class，而非硬编码响应式分支
构建时提取 DOM 结构，而非运行时 JS 渲染
用 MutationObserver 在 mounted 后扫描 DOM 生成骨架，会导致首屏闪动、hydration mismatch，尤其 SSR 场景下服务端已输出真实 HTML，客户端再插骨架会触发整块节点重挂载。
实操建议：
- 在 webpack/vite 构建阶段扫描源码中带
data-skeleton的组件模板，提取子节点层级、display 类型、padding/margin 值（跳过 JS 动态插入和 CSS-in-JS 节点） - 生成的骨架 HTML 必须保留
class和data-skeleton="true"，移除所有src、alt、innerHTML等 content 属性 - 服务端直出的骨架 HTML 与客户端 hydration 时的 class 名必须完全一致 —— 禁止用三元表达式拼接 class，如
class="card ${loading ? 'skeleton' : ''}"；推荐用class="card skeleton-card"+ CSS 控制显隐
文本与图片占位必须匹配真实渲染度量
骨架文字行高偏移、图片留白变形，本质是盒模型或字体度量没对齐。浏览器加载字体前，font-size 不可靠，但 line-height 是继承值，可提前推导。
实操建议：
- 文本骨架用
line-height × 行数估算高度，禁用空格占位或固定height；真实段落若设line-height: 1.6，骨架就设相同值 - 图片占位优先用
aspect-ratio（如aspect-ratio: 4 / 3）， fallback 方案用padding-top百分比 hack（需配合position: relative） - 所有骨架元素统一
box-sizing: border-box，外边距策略保持一致：真实内容用gap，骨架就不用margin-bottom；真实内容用display: flex，骨架节点也设相同display
SSR 场景下骨架屏的 hydration 陷阱
服务端渲染了骨架，客户端 hydration 时却显示真实内容，中间出现“骨架闪一下再消失”，问题不在动画，而在 document.readyState 判断时机和数据初始值设置。
实操建议：
- Vue 中不要依赖
loading变量控制显隐，而应检查data === null || data.length === 0；React 中用useEffect对比data是否从undefined变为有效值 - keep-alive 页面需监听
activated钩子重置加载态，否则缓存后骨架不再触发 - SSR 场景下，服务端已输出真实内容时，客户端首次 hydrate 应跳过骨架逻辑 —— 在
mounted或useLayoutEffect中判断document.readyState === 'complete'再决定是否激活骨架
box-sizing、class 名不一致，都会导致跳动或错位。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
