使用requestAnimationFrame替代定时器，优先通过CSS transform和opacity实现动画，避免频繁读写DOM属性，合理利用will-change提示浏览器优化，减少重排重绘，提升动画流畅度。
JavaScript动画如果处理不当，很容易导致页面卡顿、掉帧甚至浏览器崩溃。优化动画性能的关键在于减少重排和重绘，利用浏览器的合成机制，并选择合适的API。以下是几个核心优化策略。
使用 requestAnimationFrame 替代 setTimeout/setInterval
浏览器在执行动画时需要与屏幕刷新率同步（通常为60Hz，即每16.67ms一帧）。requestAnimationFrame（rAF）正是为此设计的API，它会在下一次重绘前执行回调，确保动画流畅且不会过度渲染。
- rAF 会自动根据设备性能调整帧率，避免在低性能设备上强行高帧率运行
- 当标签页不可见时，rAF 会暂停执行，节省资源
- 避免使用 setInterval，因为它无法保证执行时机，容易造成跳帧或堆积
尽量使用 CSS Transform 和 Opacity 实现动画
现代浏览器对 transform 和 opacity 属性做了硬件加速优化。这些属性的变化不会触发布局（layout）或绘制（paint），只会触发合成（composite），性能开销最小。
- 用
transform: translateX()代替修改left或margin-left - 用
transform: scale()实现缩放，而非修改宽高 - 通过 JavaScript 控制 class 切换，把具体动画交给 CSS 处理
避免频繁读写 DOM 属性
JavaScript 中读取某些 DOM 属性（如 offsetTop、clientWidth）会强制浏览器立即计算样式并完成重排，频繁调用会导致严重的性能问题。
立即学习“Java免费学习笔记（深入）”；
- 批量读取：将需要的值一次性读出再计算
- 避免在循环中访问布局属性
- 使用 getBoundingClientRect() 获取整体位置信息，比多次读取更高效
利用 will-change 提示浏览器优化
CSS 属性 will-change 可以提前告知浏览器某个元素即将发生变化，让浏览器提前做好图层提升和硬件加速准备。
- 对频繁动画的元素设置
will-change: transform - 不要滥用，否则会导致过多图层占用内存
- 建议在动画开始前动态添加，结束后移除
基本上就这些关键点。合理使用 rAF、把动画交给 GPU 处理、减少 DOM 操作，就能大幅提升 JavaScript 动画的流畅度。不复杂但容易忽略细节。
