在网页动画开发中，流畅的动画效果需要保证每秒60帧的渲染频率，也就是每帧的渲染时间要控制在16.7毫秒以内。传统的setTimeout虽然可以实现定时执行动画逻辑，但它在渲染调度上存在明显的缺陷，而RequestAnimationFrame是浏览器专门为动画设计的API，能更好地适配浏览器的渲染节奏，解决动画卡顿的问题。
动画卡顿的核心原因
浏览器的渲染流程是固定的，会按照一定频率执行样式计算、布局、绘制、合成等步骤。如果动画的更新逻辑没有和浏览器的渲染节奏对齐，就容易出现两个问题：一是动画更新频率过高，浏览器还没完成上一帧的渲染就开始下一帧的计算，造成计算资源浪费；二是动画更新频率过低，两帧之间间隔过长，用户会明显感知到卡顿。
RequestAnimationFrame的工作原理
RequestAnimationFrame是浏览器提供的全局API，它的回调函数会在浏览器下一次重绘之前执行，执行时机和浏览器的渲染节奏完全对齐。它的核心特性如下：
- 执行时机固定：回调会在每一帧的渲染前触发，保证动画更新和渲染同步，不会出现掉帧或者重复计算的问题。
- 页面不可见时自动暂停：当页面处于后台标签页或者最小化状态时，RequestAnimationFrame的回调不会执行，不会浪费CPU资源。
- 返回唯一的请求ID：可以通过cancelAnimationFrame方法传入这个ID取消还未执行的回调。
基础使用示例
下面是用RequestAnimationFrame实现元素水平移动的示例：
// 获取需要移动的元素
const box = document.getElementById('box');
// 初始位置
let position = 0;
// 动画函数
function animate() {
// 更新位置，每次移动2px
position += 2;
// 设置元素的left样式
box.style.left = position + 'px';
// 如果还没移动到边界，继续请求下一帧动画
if (position < 300) {
requestAnimationFrame(animate);
}
}
// 启动动画
requestAnimationFrame(animate);
RequestAnimationFrame优化动画性能的逻辑
RequestAnimationFrame对动画性能的优化主要体现在三个方面：
1. 对齐渲染节奏
浏览器的渲染频率通常是60Hz，也就是每16.7毫秒渲染一帧。RequestAnimationFrame的回调会在每一帧渲染前执行，保证动画的更新逻辑和渲染步骤同步，不会出现一帧内多次更新或者多帧才更新一次的情况，让动画的帧率稳定在60帧左右。
2. 节省后台资源
当页面切换到后台时，setTimeout的定时任务还会继续执行，持续占用CPU资源，而RequestAnimationFrame会自动暂停回调执行，直到页面重新回到前台才会继续，大幅减少了不必要的资源消耗。
3. 避免布局抖动
RequestAnimationFrame的回调执行时机在样式计算和布局之前，开发者可以在回调中统一修改样式，避免多次触发浏览器的重排重绘，减少布局抖动带来的性能损耗。
RequestAnimationFrame与setTimeout的渲染调度区别
setTimeout是通过设定时间间隔来执行回调，和浏览器的渲染节奏没有关联，两者的核心差异如下：
| 对比维度 | RequestAnimationFrame | setTimeout |
|---|---|---|
| 执行时机 | 浏览器下一次重绘之前，和渲染节奏完全对齐 | 设定的时间间隔后执行，和渲染节奏无关 |
| 后台执行逻辑 | 页面不可见时自动暂停回调 | 无论页面是否可见，都会按时执行回调 |
| 时间间隔精度 | 固定对齐浏览器渲染频率，通常为16.7ms一帧 | 受事件循环影响，实际执行时间可能远大于设定时间 |
| 动画适配性 | 专门为动画设计，帧率稳定 | 需要手动计算时间间隔来对齐帧率，容易出现卡顿 |
setTimeout实现动画的问题示例
用setTimeout实现相同的移动动画，可能会出现卡顿：
const box = document.getElementById('box');
let position = 0;
// 设定16.7ms执行一次，试图对齐60帧
function animate() {
position += 2;
box.style.left = position + 'px';
if (position < 300) {
// 实际执行时间可能受其他任务影响，无法保证刚好16.7ms
setTimeout(animate, 16.7);
}
}
setTimeout(animate, 16.7);
上面的代码中，setTimeout的实际执行时间会被事件循环中的其他任务阻塞，比如同步代码执行、接口请求等，导致两次动画更新的间隔不稳定，动画就会出现忽快忽慢的情况。
使用注意事项
使用RequestAnimationFrame时需要注意，回调函数是按照浏览器的渲染频率执行的，不要在回调中执行过于耗时的逻辑，否则会阻塞渲染，导致动画卡顿。如果动画逻辑比较复杂，可以拆分到多个帧中执行，或者把计算逻辑放到Web Worker中处理，避免阻塞主线程。
另外，RequestAnimationFrame的兼容性在现代浏览器中已经非常好，如果需要兼容非常老旧的浏览器，可以做降级处理，当浏览器不支持RequestAnimationFrame时，使用setTimeout模拟，但尽量优先使用原生API保证动画效果。
RequestAnimationFramesetTimeout动画性能优化渲染调度修改时间：2026-07-23 03:12:12