合理使用requestAnimationFrame需控制频率、避免布局抖动、及时清理动画并结合CSS优化，如每3帧执行一次逻辑减少计算，批量读写DOM属性防止重排，动画结束调用cancelAnimationFrame释放资源，将位移缩放等交由CSS硬件加速处理，JavaScript仅控制复杂交互，从而实现流畅高效动画。
在Web动画开发中，requestAnimationFrame（简称rAF）是实现流畅动画的核心API。它让浏览器在下一次重绘前执行动画回调，确保动画与屏幕刷新率同步，通常为60Hz，即每秒60帧。但若使用不当，仍可能出现卡顿、掉帧或性能浪费。掌握一些优化技巧，能显著提升动画表现。
合理控制动画频率
并非所有动画都需要每秒60帧。某些变化缓慢或人眼不易察觉的动画，可适当降低更新频率以减少计算压力。
- 通过计数器控制执行频率，例如每3帧执行一次逻辑： let frameCount = 0;
- 适用于UI淡入淡出、背景位移等非精细运动场景
function animate() {
frameCount++;
if (frameCount % 3 === 0) {
// 执行动画逻辑
}
requestAnimationFrame(animate);
}
避免强制同步布局（Layout Thrashing）
在rAF回调中频繁读写DOM样式会触发多次重排与重绘，严重拖慢性能。
- 先批量读取所有属性，再统一写入更改
- 使用getBoundingClientRect()、window.getComputedStyle()获取布局信息时，避免夹杂在样式修改之间
- 将读操作集中放在写操作之前，让浏览器合并渲染队列
及时清理无用动画循环
持续调用requestAnimationFrame而不终止，会导致内存泄漏和CPU空转。
- 动画结束后务必停止递归调用，可通过返回ID进行取消： let animId;
- 隐藏或不可见元素的动画应暂停或降级为状态更新
function animate() {
// 动画逻辑...
if (isComplete) return;
animId = requestAnimationFrame(animate);
}
// 停止动画
cancelAnimationFrame(animId);
结合CSS动画与rAF分工协作
不是所有动画都需JavaScript全程控制。合理利用CSS硬件加速特性可减轻JS负担。
- 位移、缩放、透明度等属性交给CSS transition 或 @keyframes 处理
- JavaScript仅负责触发类名切换或状态管理
- rAF用于需要精确控制时间线或动态响应用户输入的复杂动画逻辑
基本上就这些。requestAnimationFrame本身高效，但真正决定性能的是你怎么用它。减少DOM操作、控制执行节奏、及时释放资源，才能做出丝滑又轻量的动画体验。
