骨架屏需服务端或构建时静态输出，与真实内容共存并用CSS控制显隐，确保尺寸、响应式及加载时机与真实UI完全一致。
骨架屏需要在 HTML 加载前就存在 DOM 结构
骨架屏不是靠 JS 动态插入的“假占位”，而是服务端或构建时就输出的静态 实操建议： 纯色块滚动效果廉价且不自然，主流做法是用线性渐变模拟光扫过的效果。CSS 中不能写 JS 变量，所以动画必须基于 常见错误现象： 立即学习“前端免费学习笔记（深入）”； 标准写法示例： 一个卡片在桌面端是三列，在移动端变成单列，骨架屏若只按桌面结构写，小屏下会溢出或错位。不能靠媒体查询简单缩放 使用场景举例：用 容易踩的坑： 组件级骨架屏如果用 实操建议：DOMContentLoaded 再用 JS 渲染骨架，用户会先看到白屏或内容闪跳——这违背骨架屏本意。
class="skeleton-item" 的结构display: none 隐藏真实内容再切换，应让骨架和真实内容共存，用 CSS 控制显隐（例如：真实内容加载完后加 loaded 类，配合 opacity: 0 → 1 过渡）aspect-ratio 或固定 height + width，避免依赖内容撑开CSS 实现骨架动画的关键是 background-image + gradient
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()，造成高度不一致 但没加 viewBox 和 preserveAspectRatio，缩放失真Vue/React 中避免骨架屏重复渲染或内存泄漏
v-if 或 useState 控制显隐，要注意加载状态管理边界。比如 API 请求失败后没清掉骨架，或请求中多次触发导致多个骨架叠加。
骨架屏真正难的不是画几个灰色方块，而是让它的尺寸、流式行为、加载时机和真实 UI 完全对齐。多数问题都出在“以为骨架是独立模块”，其实它必须是真实组件的影子。isLoading 控制，不要嵌套在条件分支里反复挂载useEffect 里无清理地启动定时器模拟加载（如 setTimeout），否则组件卸载后仍执行，可能触发 setState on unmounted component 警告key，除非它和真实内容共用同一组 v-for / map 渲染逻辑——此时 key 必须完全一致，否则 Vue/React 会误判为不同节点而重绘
