移动端动画卡顿主因是触发重排，应优先使用transform/opacity硬件加速，避免left/top等布局属性；慎用will-change，仅对持续动画元素动态添加并及时移除；touch事件需设passive:true并用requestAnimationFrame节流。
transition 动画卡顿是因为触发了重排（layout）
移动端浏览器对 transform 和 opacity 的硬件加速支持最好，而 left、top、width、height、margin 这类会频繁触发 layout + paint 的属性，一动就掉帧。常见表现是动画“一顿一顿”，尤其在低端安卓机上明显。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 把
transition: left 0.3s ease;改成transition: transform 0.3s ease;，用transform: translateX(100px)替代left: 100px - 避免在 transition 中混用 layout 属性和合成属性（比如同时过渡
width和opacity），浏览器可能降级到软件渲染 - 检查是否在 transition 过程中被 JS 强制读取了 offsetTop / getBoundingClientRect() —— 这会强制同步 layout，打断渲染流水线
will-change 不是万能开关，滥用反而更卡
will-change 的作用是提前告诉浏览器“这个元素接下来要变，你早点准备好图层”，但它本身会占用内存、增加合成器开销。在移动端，盲目加 will-change: transform 可能让页面更慢，尤其当元素多或生命周期短时。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 只对真正需要持续动画的元素（如轮播图容器、下拉菜单面板）动态添加
will-change，动画结束立即移除：el.style.willChange = 'transform';
el.addEventListener('transitionend', () => el.style.willChange = 'auto'); - 绝对不要写
will-change: opacity—— 浏览器对 opacity 的优化已很成熟，加了反而可能触发不必要的图层提升 - 用 Chrome DevTools 的 Rendering 面板勾选 “Paint flashing” 和 “Layer borders”，确认是否真有图层被创建；没看到绿色高亮，说明
will-change没起作用或没必要
移动端 touch 事件监听器阻塞主线程
很多过渡效果绑定在 touchstart 或 touchmove 上，但默认情况下这些事件会等待主线程空闲才触发（尤其在 iOS Safari），导致动画延迟半拍，感觉“不跟手”。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给 touch 事件监听器加上
{ passive: true }，避免被浏览器静默降级：el.addEventListener('touchstart', handler, { passive: true }); - 如果 handler 里必须调用
preventDefault()（比如自定义滚动），改用 CSStouch-action: none显式声明，让浏览器提前知道不走原生滚动逻辑 - 避免在
touchmove中直接修改样式或触发动画——改用requestAnimationFrame节流，并只更新transform值
部分 Android WebView 对 will-change 支持不稳定
Android 6–8 的系统 WebView（尤其是旧版 UC、QQ 浏览器内核）对 will-change 解析异常，有时会直接禁用硬件加速，或者把整个父容器提成独立图层，造成内存暴涨和闪烁。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
@supports (will-change: transform)包裹相关样式，做渐进增强：@supports (will-change: transform) { .anim-el { will-change: transform; } } - 对老旧 WebView，宁可不用
will-change，专注保证transform+opacity的 clean transition，比强行提图层更稳 - 用
chrome://inspect连真机调试时，留意 Timeline 面板里是否有大量 “Rasterize Paint” 或 “Recalculate Style” 尖峰——那是will-change失效或反效果的信号
真正影响流畅度的，往往不是少写了 will-change，而是 transition 属性选错了、JS 干扰了渲染节奏、或者在不该提图层的地方硬提。先确保只动 transform 和 opacity，再考虑要不要加 will-change —— 很多时候，不加就是最好的加。
