骨架屏卡顿本质是动画触发重排或滥用非transform/opacity属性；应仅对transform和opacity动画，用linear-gradient替代background-image，时长控制在1.2s–1.6s。
骨架屏用 animation 实现时为什么卡顿？
本质是动画触发了大量重排（reflow）或过度使用 transform + opacity 以外的属性。比如用 width 或 height 做渐变、在伪元素里用 background-position 配合大图位移，都会让浏览器反复计算布局。
实操建议：
- 只对
transform和opacity做动画——这两者能走合成层（compositor），不触发重排重绘 - 避免在
::before/::after中用content: ""+background-image模拟加载条；改用纯色块 +linear-gradient模拟光效更轻量 - 动画时长控制在
1.2s–1.6s，过短显得突兀，过长让用户误判为卡死
示例：一个平滑横向扫光的骨架条
`.skeleton-item {
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: shine 1.4s infinite;
}
@keyframes shine {
to { background-position-x: -200%; }
}`
响应式骨架屏怎么适配不同屏幕断点？
不能靠 JS 动态加 class 或媒体查询堆叠太多规则，容易失控。核心是把骨架结构本身写成流式 + 最小约束，再用 CSS 容器查询（@container）或 viewport-relative 单位兜底。
实操建议：
- 骨架容器统一设
container-type: inline-size，子项用flex+min-width控制最小占位，避免小屏下内容被压扁 - 文字块高度用
lh（line-height）单位，比如height: 1.4lh，比固定px更适应字号缩放 - 禁用
max-width在骨架元素上——它会和父容器的响应式宽度冲突，优先用flex-basis或grid-template-columns: repeat(auto-fit, minmax(...)))
display: none 切换骨架屏为什么导致布局抖动？
因为 DOM 元素突然消失，后续真实内容渲染时重新计算位置，尤其在列表或卡片流中，上下元素会“跳一下”。这不是 CSS 问题，是显示逻辑没对齐。
实操建议：
- 用
visibility: hidden+opacity: 0替代display: none，保持占位 - 真实内容加载完成前，骨架容器保持固定宽高（可用
aspect-ratio或padding-top百分比占位） - 如果必须用
display切换，确保骨架和真实内容结构完全一致（同级元素数、盒模型一致），否则即使尺寸相同也会因 margin 折叠等细节错位
Vue/React 项目里骨架屏 CSS 怎么避免全局污染？
直接写 .skeleton 类名很容易和其他组件冲突，尤其用第三方 UI 库时。关键不是“加命名空间”，而是让样式作用域真正收敛到组件内部。
实操建议：
- 用 CSS Modules 或 Vue 的
<style scoped></style>，但注意::before/::after伪元素和子组件透传需显式声明:deep()或::v-deep - 骨架动画的
@keyframes必须写在全局作用域（CSS Modules 不支持局部 keyframes），所以名字要带业务前缀，比如@keyframes userCardShine - 避免用
!important强行覆盖，改用更具体的层级，例如.user-card__skeleton .skeleton-line而非.skeleton-line
骨架屏最难的从来不是画得多像，而是让加载过程在各种尺寸、各种网络延迟、各种 DOM 更新节奏下都不“抢戏”。稍微多花两分钟检查 will-change 和容器尺寸锁定，比后期调十次动画曲线实在得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
