掉帧主因是浏览器每帧被迫执行cpu重排或重绘，尤其在android 5–7 webview中；仅transform/opacity可全程gpu加速，其余属性如top/left/color/box-shadow/filter均触发主线程渲染，导致帧率骤降。
掉帧不是“动画太复杂”，而是浏览器被迫每帧都走 CPU 重排或重绘——低端安卓机（尤其是 Android 5–7 WebView）扛不住，60fps 直接砸到 20fps 以下。
为什么 transform/opacity 是唯一安全的动画属性
只有 transform 和 opacity 能全程走 GPU 合成线程，不触发 layout 或 paint。其他任何属性动一下，整条动画就降级回主线程。
-
top/left/width/height→ 触发重排（reflow），CPU 重新算布局，低端机一帧卡死多次 -
color/background-color→ 触发重绘（repaint），文字要重栅格化、抗锯齿，无法 GPU 加速 -
box-shadow的blur-radius或filter: blur()→ 每帧实时高斯卷积，纯 CPU Paint，will-change完全无效 - 哪怕在
@keyframes里混进一个margin，整个动画流水线就崩了，浏览器不会报错，但帧率会默默掉下去
box-shadow 和 filter 为什么是“掉帧核弹”
它们不是“有点慢”，是在 Android 5–7 WebView 中根本进不了合成线程——浏览器只能老老实实拿 CPU 一帧一帧画阴影和模糊，显存还随 blur-radius 平方级暴涨。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 实测：MT6737（Android 6.0）上单个
box-shadow: 0 4px 12px rgba(0,0,0,0.15)就让动画掉帧 15–20% -
filter: blur(2px)在中低端安卓上基本等于“CPU 渲染邀请函”，drop-shadow()虽稍好，但在旧 WebView 中常被忽略或退化 - 父容器设了
overflow: hidden+ 子元素带box-shadow+transform→ 某些安卓 WebView 直接放弃图层合并，整块重绘 - 用 Chrome DevTools 开
Rendering → Paint flashing，绿色高亮集中在阴影区域，就是它拖后腿
will-change 不是加速开关，是定时炸弹
静态写 will-change: transform 在 CSS 里，等于让浏览器永远给这个元素建独立 GPU 图层——内存涨、上下文切换多、滚动反而更卡。
- 只应在动画开始前 1–2 帧用 JS 动态设置：
el.style.willChange = 'transform' - 必须监听
animationend或transitionend立刻清空：el.style.willChange = 'auto' - iOS Safari 可能不触发
animationend，加兜底：setTimeout(() => el.style.willChange = 'auto', duration + 100) - 绝对不要对列表项批量设：
.list-item { will-change: transform; }→ 安卓低端机容易 OOM - 验证是否生效？开 DevTools →
Rendering → Layer borders，看目标元素有没有绿框；没绿框=还在主线程跑
颜色动画怎么绕过重绘
color 动画必然重绘，没法 GPU 加速。别优化它，直接绕开——用两层文字叠一起，靠 opacity 切换显隐，全程只动合成属性。
- 外层容器
position: relative，两层文字都position: absolute、尺寸内容完全一致 - 初始状态：
.text-1 { opacity: 1; } .text-2 { opacity: 0; } - 动画只改两个
opacity：transition: opacity 0.3s，别用display: none或visibility: hidden，会破坏图层缓存 - 同理可套用到
background-color、border-color、text-shadow等所有重绘类属性
真正卡顿的元凶，往往不是你写的动画本身，而是动画过程中偷偷调用了 getBoundingClientRect()、offsetHeight，或者在 transition 里混写了 width —— 这些操作会在一帧内强制同步 layout，瞬间破防。盯紧整条渲染路径，确保它从头到尾只走合成线程。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
