前端动画性能优化

先说说为啥动画性能这么要命。现在用户可没耐心等你页面慢慢加载，动画一卡顿，轻则体验打折，重则流失用户。更别提搜索引擎现在把页面交互流畅度也算进排名因素了，你要敢让动画掉帧，SEO排名分分钟往下掉。而且移动端设备性能参差不齐，低配手机上动画要是没优化，直接能当暖手宝用。

常见的坑主要集中在两方面：一是JavaScript瞎搞，二是渲染管道堵车。比如有人喜欢用setInterval硬怼动画帧率，结果主线程被阻塞，页面直接假死。还有的兄弟疯狂操作DOM元素，每帧都触发重排重绘，浏览器累得吭哧吭哧的，动画能不卡吗？我记得有回见人用jQuery的animate方法实现渐变效果，元素数量一多立马跪，后来换CSS3过渡才救回来。

说到优化，头号法宝就是CSS动画。这玩意儿浏览器专门开了硬件加速通道，处理起来比JS轻量多了。比如位移动画直接用transform: translate，缩放用scale，透明度变化用opacity，这些属性不会触发重排，直接走合成层。记得有次我把left/top改成transform，帧率直接从30fps飙到60fps。不过要注意别滥用box-shadow这类耗性能的属性，曾经有个按钮加了个巨大阴影，中端手机上一滑动就闪屏。

第二个利器是requestAnimationFrame。这API聪明在跟着浏览器刷新率走，掉帧时自动降频，避免浪费资源。写JS动画时务必用它替代setTimeout，记得在函数里先清空上一帧再画新帧。我有个列表滚动优化案

https://www.zhihu.com/zvideo/1986142849591435901
https://www.zhihu.com/zvideo/1986142746558353655
https://www.zhihu.com/zvideo/1986142654145271103
https://www.zhihu.com/zvideo/1986142557047117398
https://www.zhihu.com/zvideo/1986142467276440594
https://www.zhihu.com/zvideo/1986142371612754146
https://www.zhihu.com/zvideo/1986142263793975436
https://www.zhihu.com/zvideo/1986142161100613077
https://www.zhihu.com/zvideo/1986142059321659488
https://www.zhihu.com/zvideo/1986141958440251931
https://www.zhihu.com/zvideo/1986141874117965445
https://www.zhihu.com/zvideo/1986141775576995265
https://www.zhihu.com/zvideo/1986141682077545305
https://www.zhihu.com/zvideo/1986141588246779875
https://www.zhihu.com/zvideo/1986141495779153863
https://www.zhihu.com/zvideo/1986141410915816554
https://www.zhihu.com/zvideo/1986141315839333624
https://www.zhihu.com/zvideo/1986141222121783461
https://www.zhihu.com/zvideo/1986141130031654491
https://www.zhihu.com/zvideo/1986141035894700031

例，原本用定时器计算位置，安卓机上疯狂抖动，换成rAF后顺得跟抹了油似的。

重绘重排这块得重点盯防。动画过程中尽量别读DOM属性，比如offsetWidth这些会强制同步布局。有回我写个进度条动画，每帧都读取元素宽度，结果性能分析器里满屏的Layout Trashing。后来改用变量缓存数据，CPU占用率立马降了40%。还有个骚操作是will-change属性，提前告诉浏览器元素要变化，让它预先分配资源。不过别乱用，过度声明反而吃内存。

硬件加速虽然香，但不能乱开。translateZ(0)或者translate3d确实能触发GPU渲染，但图层太多会导致内存暴涨。我们项目就遇到过iPad上动画闪退，一查发现是几十个元素都开了强制加速，后来改用translateY配合will-change动态管理，问题才解决。

调试工具也得玩溜。Chrome的Performance面板能逮住掉帧元凶，Memory面板防内存泄漏。推荐个土法子：写个fps计数器实时监控，低于50帧就得赶紧优化。之前我靠这个发现有个CSS滤镜动画在 Safari 上特别耗电，换成SVG滤镜后电池续航明显改善。

最后唠叨两句代码习惯。动画元素最好单独分层，用transform和opacity隔离变化。复杂动画可以考虑WebGL或者Lottie库，2D动画的话GSAP库比手动写rAF省心得多。记得做降级方案，低端设备直接关掉非核心动画，毕竟流畅比花哨重要。

总之前端动画优化就是个平衡术，既要效果炫又要性能稳。多测试真机数据，少拍脑门写代码。只要把渲染流水线摸透，卡顿问题基本都能手到擒来。各位要是有什么实战坑点，欢迎在评论区甩出来一起切磋！