按钮骨架屏加载跳动90%因宽高未对齐真实按钮，需用aspect-ratio、统一line-height/font-size、保留图标占位、加contain属性；动画改用transform+opacity；服务端直出须同构内联；Vue/React显隐要卡准数据空状态而非loading。
按钮骨架屏为什么一加载就“跳”
按钮骨架跳动，90% 是因为宽高没对齐真实按钮。真实按钮可能依赖 padding、font-size、line-height 或 border-radius 动态撑开，而骨架用了固定 height 或 width: 100%，导致渲染后重排。更隐蔽的问题是：按钮文字换行位置偏移（比如真实按钮用 white-space: nowrap，骨架没设）、图标占位缺失（真实按钮含 <svg></svg>，骨架直接删掉该节点）。
- 用
aspect-ratio替代固定尺寸：若按钮宽高比固定（如圆形头像按钮），写aspect-ratio: 1 / 1，而非width: 40px; height: 40px - 文字部分统一用
line-height+font-size控制高度，禁用空格或width: 60%模拟文本长度 - 真实按钮含图标时，骨架中保留同尺寸的
<div class="skeleton-icon"></div>，并设display: inline-flex和真实按钮一致 - 所有按钮骨架加
contain: layout paint style，但需包裹在@supports (contain: layout) { ... }中兼容 Safari
怎么让按钮骨架动画不卡顿
按钮骨架常用 linear-gradient + background-position 实现 shimmer 效果，但在 Safari 15.4–16.3 和部分安卓 WebView 中会掉帧甚至静止。这不是 CSS 写错，而是浏览器对渐变动画优化不足。
- 改用
transform: translateX()+opacity组合动画，例如：@keyframes skeleton-shimmer { 0% { opacity: 0.6; transform: translateX(-100%); } 100% { opacity: 0.2; transform: translateX(100%); } } - 动画时长控制在
1.4s，太快显得浮躁，太慢削弱“正在加载”的暗示 - 给伪元素加
content: ""和position: absolute，父容器必须设position: relative，否则动画层脱标导致错位 - 对
prefers-reduced-motion: reduce用户关闭动画：@media (prefers-reduced-motion: reduce) { .skeleton-btn { animation: none; } }
服务端直出按钮骨架的关键细节
按钮骨架必须和服务端输出的 index.html 一同到达浏览器，不能靠 JS 动态插入——否则用户先看到白屏，再闪出骨架，最后才出现按钮，形成“白→灰→实”三段式渲染，LCP 和 CLS 都会恶化。
- 骨架结构与真实按钮必须同构：比如真实按钮是
<button class="btn-primary"><svg>...</svg>提交</button>，骨架就得写成<button class="btn-primary" data-skeleton="true"><div class="skeleton-icon"></div> <div class="skeleton-text"></div></button> - 所有样式必须内联在
<style></style>中，禁用@import和未声明的 CSS 变量；data-skeleton="true"用于后续 JS 精准切换，避免 hydration 时被框架直接替换 - 按钮圆角、阴影、边框宽度必须和真实按钮完全一致，哪怕只差
1px，加载后也会明显“弹一下” - 禁用
visibility: hidden控制显隐——它保留布局空间但不可交互；改用opacity: 0+pointer-events: none配合过渡
Vue/React 中按钮骨架显隐时机怎么卡准
按钮骨架不是等 loading 变量为 true 才显示，而应在组件挂载、DOM 可见、且按钮对应数据为空时立即激活。常见错误是把骨架当 v-if="loading" 的装饰，结果请求还没发，骨架还没出来。
立即学习“前端免费学习笔记（深入）”；
- Vue 中不要监听
loading，检查buttonText === null || buttonText === undefined；在onBeforeMount阶段就确保骨架已存在 DOM 中 - React 中用
useEffect(() => { fetch().then(...) }, [])外层保留骨架，且组件不能带动态key，否则骨架和真实按钮会被当成两个不同节点，过渡中断 - SSR 场景下，服务端已渲染真实按钮，客户端 hydration 时骨架又闪一下——需在
onMounted或useLayoutEffect中判断document.readyState === 'complete'再决定是否保留骨架 - 按钮处于禁用态（
disabled）时，骨架不应模拟禁用样式（如灰色透明），因为骨架本身无交互逻辑，统一用默认状态即可
