纯静态骨架屏用div比svg更轻量，体积小、渲染快、兼容ie11，推荐精简结构+linear-gradient动画+display:none切换+min-height:100vh防塌陷。
骨架屏用 div 模拟比 SVG 更轻量
纯静态骨架屏没必要引入 SVG 或第三方库，用几行 div + class 配合 CSS 动画就能跑起来。关键不是“像不像”，而是“够不够快、会不会闪”。div 方案体积小、渲染快、兼容性好（IE11 也撑得住），且能直接内联在 HTML 里，省去 JS 加载和 DOM 插入的延迟。
常见错误是给骨架加太多嵌套或伪元素，导致首屏渲染卡顿。建议只保留最必要的结构层级：
<div class="skeleton"> <div class="skeleton-header"></div> <div class="skeleton-content"></div> <div class="skeleton-footer"></div> </div>
CSS 动画必须用 background-image: linear-gradient
用渐变模拟“光扫过”的效果，比 opacity 闪烁或 transform 移动更接近真实加载感，且性能更好。别用 animation: loading 2s infinite 这种笼统写法——它容易在 Safari 上卡顿，且无法控制扫描方向。
实操要点：
-
background-image必须配background-size和background-position才能动起来 - 动画时长设为
1.5s，太短显得急，太长用户会以为卡了 - 所有骨架元素统一用
background-color: #f0f0f0，避免色差干扰 - 禁用
will-change: transform，移动端反而触发重绘
.skeleton {
background-color: #f0f0f0;
background-image: linear-gradient(90deg, transparent, #e0e0e0, transparent);
background-size: 200% 100%;
animation: loading 1.5s infinite;
}
@keyframes loading {
0% { background-position: -200% 0; }
100% { background-position: 200% 0; }
}
加载完成时用 display: none 切换，别删 DOM
很多人用 JS 把骨架 remove() 或 innerHTML = ''，这会导致重排重绘，尤其在列表页中容易闪一下。正确做法是保留骨架节点，仅用 display: none 隐藏，并立刻把真实内容 insertAdjacentHTML 到同一父容器里。
注意两个细节：
- 切换前确保真实内容已完整解析（比如等
fetch().then()回调执行完） - 骨架和真实内容的容器必须同级，否则
display: none后留白位置会错位 - 别在骨架上绑事件监听器，它只是占位符，没交互意义
移动端需加 min-height: 100vh 防止骨架塌陷
手机端加载慢，骨架如果没撑开视口高度，用户会看到一片空白再突然弹出内容，体验极差。单纯靠内容高度撑不开，因为骨架本身没内容。
解决方式很简单：
- 骨架容器加
min-height: 100vh，但不要用height: 100vh（iOS Safari 会把地址栏高度算进去） - 若页面有吸顶导航栏，骨架容器要预留
padding-top，值等于导航栏高度 - 避免用
vh单位做骨架内部尺寸（如width: 80vh），Safari 下计算不稳定
真正难的是让骨架宽度自适应又不溢出——多数人忽略这点，结果在小屏上横向滚动条一闪而过。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
