requestAnimationFrame是浏览器提供的JavaScript API，用于在下一次屏幕重绘前执行动画逻辑，比setInterval更精准、省电且自动暂停；它需手动递归调用，接收高精度时间戳，须用cancelAnimationFrame停止，不可用于HTML或CSS中。
requestAnimationFrame 是什么，为什么不用 setInterval
requestAnimationFrame 不是 HTML 的功能，而是浏览器提供的 JavaScript API，用于在下一次屏幕重绘前执行动画逻辑。它比 setInterval 或 setTimeout 更精准、更省电，且会自动暂停（比如标签页不可见时），避免后台跑满 CPU。
常见错误是把它当成 HTML 标签或 CSS 属性去写，比如试图在 <div> 里加 <code>requestanimationframe 属性——这完全无效。它只能在 JS 中调用。
使用场景：做滚动跟随、Canvas 绘图动画、CSS 属性逐帧更新（如 transform）、物理模拟等需要高帧率控制的逻辑。
基础写法：递归调用 + 时间戳参数
requestAnimationFrame 必须手动递归调用才能持续执行，不像 setInterval 那样自动循环。它的回调函数会收到一个高精度时间戳（单位毫秒，与 performance.now() 同源），这是计算动画进度的关键依据。
立即学习“前端免费学习笔记（深入）”；
容易踩的坑：
- 忘记递归调用 → 动画只执行一帧就停
- 忽略时间戳参数 → 用
new Date()或固定增量算位移，会导致快慢不均甚至跳帧 - 在回调里直接修改 DOM 多次 → 触发多次重排，卡顿
正确示例：
function animate(timestamp) {
// timestamp 是系统传入的高精度时间，单位 ms
const elapsed = timestamp - lastTime;
element.style.transform = `translateX(${position + elapsed * 0.5}px)`;
position += elapsed * 0.5;
lastTime = timestamp;
requestAnimationFrame(animate); // 必须递归
}
let lastTime = performance.now();
let position = 0;
requestAnimationFrame(animate);
如何停止 requestAnimationFrame
requestAnimationFrame 返回一个整数 ID，但**不能直接用 clearTimeout 清除**——这是常见误解。必须用 cancelAnimationFrame 配对使用。
典型错误现象：动画已退出但仍持续触发回调，内存泄漏，CPU 占用居高不下。
实操建议：
- 把
requestAnimationFrame的返回值存为变量（如animId） - 退出动画逻辑时调用
cancelAnimationFrame(animId) - 如果动画由用户交互触发（如 hover、scroll），务必在事件离开时清理
- 组件卸载（React useEffect cleanup / Vue onUnmounted）中也要 cancel
示例：
let animId = null;
<p>function start() {
function step(timestamp) {
// ...动画逻辑
animId = requestAnimationFrame(step);
}
animId = requestAnimationFrame(step);
}</p><p>function stop() {
if (animId !== null) {
cancelAnimationFrame(animId);
animId = null;
}
}
兼容性与性能关键点
现代浏览器（Chrome 24+、Firefox 23+、Safari 6.1+、Edge 10+）都支持 requestAnimationFrame，IE10+ 也支持，但 IE9 及更早版本需用 setTimeout 降级。不过现在基本可忽略 IE9。
真正影响流畅度的不是 API 本身，而是你在回调里做了什么：
- 避免在回调中读取
offsetTop、getComputedStyle等触发重排/重绘的属性（会产生强制同步布局） - 优先用
transform和opacity做动画，它们走合成层，不触发 Layout & Paint - 如果涉及大量 DOM 更新，考虑用
documentFragment批量操作 - 移动端注意：部分安卓 WebView 对
requestAnimationFrame调度不稳，可加will-change: transform提前提示合成器
帧率不稳时，先查 DevTools 的 Performance 面板，看每帧是否超 16ms，而不是急着换库或加 setTimeout fallback。
