移动端低端浏览器掉帧主因是混用非合成属性（如left、width、filter等）触发重排或重绘，致动画退回cpu渲染；仅transform和opacity安全，且需动态提层、规避overflow:hidden、禁用同步布局读取。
移动端低端浏览器（尤其是 Android 5–7 WebView、Safari 9–10）掉帧，几乎从不因为“没开 GPU 加速”，而是因为用了它根本扛不住的属性，或在不该读的时候读了布局——transform 和 opacity 是仅有的两个能稳住 60fps 的合成属性，其他混入即降级。
为什么 transition: left 0.3s 必卡，而 transition: transform 0.3s 能跑满帧
改 left 或 top 会强制触发重排（reflow）：浏览器得在主线程里重新计算位置、尺寸、换行、文本流……一次重排实测耗时 3–8ms，低端安卓机一帧内反复重排，主线程直接堵死。而 transform: translateX(100px) 只挪图层，由 GPU 合成线程处理，不碰 layout、不重绘、不阻塞主线程。
- 错：
transition: left 0.3s, opacity 0.3s→ 混入非合成属性，整条过渡降级回 CPU 渲染 - 对：
transition: transform 0.3s, opacity 0.3s→ 且确保 JS 或 class 切换时，只改这两个属性 - 绝对别写
transition: all 0.3s：它是定时炸弹，hover 时意外改了color就破防
旧版 Android WebView 中如何安全触发图层提升
translate3d(0, 0, 0) 在 Android 5–7 中仍是有效的图层提升兜底手段，比 translateZ(0) 更稳；但它不是“开关”，是副作用触发器——不改变视觉，但让浏览器提前把元素升到独立 GPU 合成层。
- 必须 JS 动态加在**即将动画的单个元素**上，比如弹窗根节点、轮播容器，而不是全局写
.item { transform: translate3d(0, 0, 0); }（内存飙升、滚动卡死） - 加完必须清理：
animationend监听后执行el.style.transform = ''；安卓低版本可能丢事件，加兜底：setTimeout(() => el.style.transform = '', duration + 100) - 避免父容器设
overflow: hidden或filter: blur(1px)——这些会抑制子元素提层，导致绿色边框出不来
哪些 CSS 属性一用就卡，必须砍掉
浏览器不会报错，但只要 @keyframes 或 transition 里混进一个非合成属性，整段动画就默默退回 CPU 渲染。旧版 Android WebView 对这类退化尤其敏感。
-
top/left/margin/width/height：改一次就触发重排，主线程瞬间堵死 -
filter: blur()、box-shadow动画：CPU 做高斯模糊或阴影重绘，blur(1px) 就可能拖垮帧率 -
background-color、border-radius、color：触发重绘（repaint），大区域或高 DPI 屏上卡顿明显 - 第三方库如 Animate.css 中的
animate__hinge、animate__swing、animate__jello等含 filter/rotate/skew 混合的类，必须禁用或降级为纯transform+opacity实现
验证 GPU 加速是否真实启用，以及 JS 隐性破防点
写了 transform、加了 will-change，不代表真加速。关键看浏览器是否真建了独立合成层。
- Chrome DevTools → Rendering 面板 → 勾选 “Layer Borders”：有绿色边框的元素才是被提升的图层
- Layers 面板搜索目标元素：应单独显示为
GraphicsLayer，而非 “Shared with ancestor” - 动画过程中禁用所有
getBoundingClientRect()、offsetHeight、getComputedStyle()—— 即使只调一次，也会强制同步 layout，直接破防 -
will-change必须动态控制：touchstart 时设el.style.willChange = 'transform'，animationend后立刻清为'auto'；iOS Safari 对 ≤16ms 动画可能不触发事件，务必加setTimeout兜底
真正顺滑的前提，不是“加了什么”，而是“没动什么”——没混非合成属性，没读布局，没静态堆图层，也没在动画中途偷偷改 box-shadow 或 filter。这些细节在低端机上不是“差点意思”，而是“一帧都不给”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
