骨架屏加载闪烁的根本原因是DOM渲染与真实内容替换存在竞态，尤其SSR+hydration时服务端输出骨架、客户端JS暴力重绘导致视觉闪动。
骨架屏为什么一加载就闪一下
根本原因是骨架屏 DOM 渲染和真实内容替换之间存在竞态：骨架屏用 CSS 动画模拟加载，但 JS 加载完数据后直接 innerHTML 或 replaceChildren() 替换节点，浏览器来不及做平滑过渡，视觉上就是“闪”。尤其在 SSR + hydration 场景下更明显——服务端已输出骨架 HTML，客户端 JS 拿到数据后暴力清空再重绘。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 避免用
innerHTML = ''清空骨架容器，改用element.replaceWith(realContent)或给骨架元素加data-skeleton属性，JS 只替换带该标记的节点 - 动画结束前不触发真实内容渲染：监听
getComputedStyle(skeleton).animationName或用setTimeout延迟 16ms（1 帧）再挂载内容 - Vue/React 用户别依赖
v-if或{loading ? <skeleton></skeleton> : <real></real>}的粗暴切换，改用transition组件或useTransition配合 opacity + height 过渡
CSS 动画用 animation 还是 transition
骨架屏的“流动感”必须用 animation，transition 只能响应属性变化，无法模拟持续扫描光效。但很多人误用 @keyframes 导致闪烁或卡顿——核心问题在于动画时长、缓动函数和背景渐变的配合。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 动画时长设为
1.2s～1.6s，太短显突兀，太长让用户误判加载失败 - 禁用
ease-in-out，改用cubic-bezier(0.4, 0.0, 0.2, 1)（即easeOutCubic），让光效“扫过”更自然 - 背景渐变必须用
linear-gradient(90deg, transparent, #f0f0f0, transparent)，且background-size设为200% 100%，否则动画会跳帧
React/Vue 中骨架屏组件怎么避免重复渲染
常见错误是把骨架组件写成无状态函数，每次父组件 re-render 就新建一次 DOM 节点，导致骨架反复销毁重建，动画中断。本质是没区分“占位结构”和“动态内容”的生命周期边界。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 骨架组件内部用
useMemo缓存 DOM 结构，或 Vue 里用keep-alive包裹骨架区域（注意只包裹骨架，不包裹真实内容） - 不要在骨架组件里读取 props 数据，它只负责静态结构；真实数据由父组件控制，通过
loadingflag 切换显示状态 - Next.js 用户慎用
dynamic(import(), { ssr: false })加载骨架——SSR 时骨架不输出，首屏直接空白，反而更差
字体加载导致骨架屏错位怎么办
骨架宽高按默认字体（如 Times New Roman）计算，等自定义字体 @font-face 加载完，文字变高/变窄，骨架容器突然撑开或收缩，产生“抖动”。这不是动画问题，是排版层未收敛。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给所有文本容器加
font-display: optional，让浏览器在字体未就绪时先用系统字体撑开空间 - 骨架元素显式设置
line-height和min-height，例如min-height: 1.5em，不依赖字体度量 - 用
document.fonts.load('16px "YourFont"')+Promise.race控制骨架隐藏时机，超时（如 3s）则强制展示内容，不等字体
最麻烦的其实是字体 + flex 布局 + 骨架动画三者叠加时的尺寸坍塌，这时候得在骨架元素上加 flex-shrink: 0 和固定 height，宁可牺牲一点弹性也不能抖。
