骨架屏是用灰色块模拟页面结构的HTML/CSS占位布局，区别于GIF或文字loading；它呈现UI轮廓降低感知等待时间，适用于结构固定的首屏，纯CSS通过渐变动画实现，需框架响应式控制显隐，SSR下须内联样式并确保hydration一致。
什么是骨架屏，和普通 loading 图有什么区别
骨架屏不是动效 GIF，也不是文字“加载中”，它是用灰色块模拟真实页面结构的 HTML/CSS 占位布局。用户看到的是接近最终 UI 的轮廓（比如标题栏、卡片、头像位置），而非空白或旋转图标——这能显著降低感知等待时间。
关键判断：如果页面首屏内容有固定结构（如新闻列表、商品卡片、用户资料），骨架屏就比 loading.gif 更合适；如果结构动态不可预知（比如纯富文本流），强行做骨架屏反而增加维护成本。
纯 CSS 实现骨架屏的最小可行代码
不需要 JS 控制显隐，直接用 class 切换即可。核心是用 background-image: linear-gradient(...) 模拟灰阶色块，并配合 animation 做流动光效。
- 用
.skeleton类控制整体占位区域尺寸和圆角 - 每个占位元素（如头像、标题）用
background-color: #f0f0f0+background-image叠加渐变动画 - 动画必须用
@keyframes定义，且background-position需横向移动才能模拟“扫描光”效果 - 避免用
opacity动画，它会导致重绘性能下降；优先用background-position
.skeleton {
background-color: #f0f0f0;
background-image: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
background-size: 300% 100%;
animation: loading 1.5s infinite;
}
@keyframes loading {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
.skeleton-avatar { width: 40px; height: 40px; border-radius: 50%; }
.skeleton-title { width: 60%; height: 20px; margin-top: 12px; border-radius: 4px; }
如何在 Vue/React 中按需切换骨架屏与真实内容
不能靠 JS 手动增删 class，要利用框架的数据响应机制。重点在于「占位时机」——骨架屏应在数据请求发起后立即显示，而不是等接口返回失败才 fallback。
立即学习“前端免费学习笔记（深入）”；
- Vue：用
v-if绑定loading状态，loading应在mounted或onMounted中设为true，接口 resolve 后设为false - React：用
useState管理isLoading，注意不要在useEffect里忘记清理 pending 请求，否则可能 setState on unmounted component - 切忌用
v-show或visibility: hidden隐藏骨架屏——它仍会参与布局计算，影响 SSR 渲染一致性 - 真实内容渲染前，骨架屏 DOM 必须已存在，否则会出现“闪一下空白再出骨架”的问题
服务端渲染（SSR）下骨架屏的坑
Node.js 环境不支持 document.createElement，也不能执行浏览器端动画。所以 SSR 骨架屏只能输出静态结构 + 内联样式，JS 动画必须延迟到客户端激活（hydration）后启动。
- 所有骨架屏 CSS 必须内联（inline style）或通过
style标签注入，不能依赖外部 CSS 文件（SSR 时无 link 加载） - 动画相关属性（如
animation）应写在<style>标签里，且确保该<style>在 HTML 字符串中位于骨架元素之前 - 若用
next.js或nuxt，需确认骨架组件未使用window、document等浏览器 API，否则 SSR 报错ReferenceError: window is not defined - Hydration 不匹配（mismatch）是高频问题：服务端输出的骨架结构，和客户端 JS 渲染的真实 DOM 结构必须完全一致，否则 React/Vue 会丢弃整个节点重新挂载
最易被忽略的一点：骨架屏的宽高必须由 CSS 固定（如 height: 80px），不能依赖内容撑开。否则 SSR 输出的 HTML 高度为 0，首屏白屏时间反而更长。
