骨架屏需服务端或构建时静态输出，与真实内容共存并用CSS控制显隐，确保尺寸、响应式及加载时机与真实UI完全一致。
骨架屏需要在 HTML 加载前就存在 DOM 结构
骨架屏不是靠 JS 动态插入的“假占位”，而是服务端或构建时就输出的静态 <div> 块。如果等 DOMContentLoaded 再用 JS 渲染骨架，用户会先看到白屏或内容闪跳——这违背骨架屏本意。
实操建议：
- 在服务端模板（如 EJS、Nunjucks）或 Vue/React 的 SSR 阶段，直接输出带
class="skeleton-item"的结构 - 避免用
display: none隐藏真实内容再切换，应让骨架和真实内容共存，用 CSS 控制显隐（例如：真实内容加载完后加loaded类，配合opacity: 0 → 1过渡） - 骨架元素需有明确宽高，否则可能塌陷；推荐用
aspect-ratio或固定height+width，避免依赖内容撑开
CSS 实现骨架动画的关键是 background-image + gradient
纯色块滚动效果廉价且不自然，主流做法是用线性渐变模拟光扫过的效果。CSS 中不能写 JS 变量，所以动画必须基于 background-position 位移实现。
常见错误现象：background: linear-gradient(...) 写对了但没动——因为漏了 background-size 和 animation 配合。
立即学习“前端免费学习笔记（深入）”；
标准写法示例：
.skeleton-item {
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: loading 1.5s infinite;
}
@keyframes loading {
0% { background-position: -200% 0; }
100% { background-position: 200% 0; }
}
响应式骨架屏要匹配真实组件的断点逻辑
一个卡片在桌面端是三列，在移动端变成单列，骨架屏若只按桌面结构写，小屏下会溢出或错位。不能靠媒体查询简单缩放 width，而应复用真实布局的栅格规则。
使用场景举例：用 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) 的列表，骨架屏的容器也得套同一套 grid，每个 .skeleton-card 用 min-width: 300px 对齐。
容易踩的坑：
- 在骨架上用
flex-wrap但没设flex-basis，导致小屏下子项被强行压缩 - 字体大小用
px固定，而真实文本用了rem或clamp()，造成高度不一致 - 图标占位用
<svg>但没加viewBox和preserveAspectRatio，缩放失真
Vue/React 中避免骨架屏重复渲染或内存泄漏
组件级骨架屏如果用 v-if 或 useState 控制显隐，要注意加载状态管理边界。比如 API 请求失败后没清掉骨架，或请求中多次触发导致多个骨架叠加。
实操建议：
- 把骨架结构写在组件顶层，用单一布尔值
isLoading控制，不要嵌套在条件分支里反复挂载 - 在 React 中，避免在
useEffect里无清理地启动定时器模拟加载（如setTimeout），否则组件卸载后仍执行，可能触发setState on unmounted component警告 - 骨架屏本身不用加
key，除非它和真实内容共用同一组v-for/map渲染逻辑——此时 key 必须完全一致，否则 Vue/React 会误判为不同节点而重绘
