骨架屏是用灰色块模拟真实内容结构（如标题高度、头像位置、段落行宽）的静态占位ui，旨在缓解白屏焦虑、提升感知性能；相比loading图标，它提供布局预期、避免跳变，需与真实dom严格对齐尺寸和层级。
什么是 skeleton 骨架屏，为什么不用 loading 图标
骨架屏不是“加载中”动效，而是用灰色块模拟真实内容的结构（比如标题栏高度、头像位置、段落行宽），让用户感知页面正在加载且布局不会跳变。相比 loading 图标，它缓解白屏焦虑、提升 perceived performance，尤其在 SSR 或首屏数据延迟明显时更有效。
关键点：骨架屏必须和真实 DOM 结构保持一致的尺寸与层级，否则切换时会抖动；它本身是静态 HTML/CSS，不依赖 JS 渲染逻辑。
纯 CSS 实现 skeleton 的核心技巧
不用 JS 控制显隐，直接用 class 切换即可。常见错误是给所有元素加 background-image: linear-gradient(...)，但漏掉 background-clip: text 或没设 background-size 导致渐变条纹不流动。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 用
background-color: #f0f0f0作底色，再叠加linear-gradient(90deg, transparent, #e0e0e0, transparent)模拟光效流动 - 必须配
background-size: 200% 100%和animation: loading 2s infinite才能看到扫描效果 - 文字类骨架要加
line-height和font-size占位，不能只靠height，否则换字体后错位 - 图片骨架推荐用
aspect-ratio+background-color，避免 img 标签触发网络请求
```css
.skeleton {
background-color: #f0f0f0;
background-image: linear-gradient(90deg, transparent, #e0e0e0, transparent);
background-size: 200% 100%;
animation: loading 2s infinite;
}
@keyframes loading {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
```
Vue/React 中如何安全替换 skeleton 为真实内容
最常踩的坑是：真实数据渲染后，DOM 节点结构和 skeleton 不一致（比如 skeleton 里是 div，真实内容用了 article），导致 CSS 选择器失效或高度突变。
- 骨架和真实模板必须共用同一套 class 命名，例如都用
card-title、card-avatar - 不要用 v-if / conditional rendering 切换整个区块，改用
v-show或opacity: 0 → 1过渡，避免重排 - React 中慎用
key变更，否则骨架 DOM 被销毁，真实内容重新挂载，动画中断 - 服务端渲染（SSR）时，骨架屏需在 HTML 中直接输出，而不是等 JS 加载后再插入，否则首屏仍是白屏
本地开发时快速预览 skeleton 效果的偷懒法
不需要跑完整项目也能看骨架是否对齐：把 skeleton HTML 单独存成 skeleton.html，用浏览器打开，然后手动修改 class 触发切换（比如删掉 skeleton 类），对比结构是否“严丝合缝”。
- 用 Chrome DevTools 的
Elements → Styles面板，勾选/取消skeletonclass 实时对比 - 如果用 Tailwind，直接写
bg-gray-200 animate-pulse快速占位，但注意animate-pulse是闪烁而非扫描，体验不如自定义 gradient - 别在骨架上加
border或box-shadow，这些在真实内容里通常没有，会导致视觉跳变
真正难的不是画出灰色块，而是让每个 margin、padding、line-height 都和上线后一模一样——这需要设计稿标注和前端实现强对齐，而不是靠“差不多”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
