requestAnimationFrame 是实现流畅动画的唯一合理选择，因其与屏幕刷新率同步、后台自动暂停、无强制延迟抖动；需用时间戳计算 deltaTime 保证跨设备速度一致，避免混用 CSS 动画时的跳变。
requestAnimationFrame 是实现流畅 JavaScript 动画的唯一合理选择，setTimeout/setInterval 本质无法匹配屏幕刷新节奏，必然掉帧或卡顿。
为什么 requestAnimationFrame 比 setTimeout 更适合动画
浏览器在每次重绘前会主动调用 requestAnimationFrame 回调，它天然与显示器刷新率（通常是 60Hz）同步；而 setTimeout 只能“尽力”按毫秒间隔执行，实际触发时间受 JS 主线程阻塞、任务队列延迟等影响，容易累积误差。更关键的是：页面切到后台时，requestAnimationFrame 会被自动暂停，setTimeout 却照常运行，浪费资源甚至导致切回前台时动画突进。
- 不手动控制帧率 —— 浏览器决定何时执行，你只负责“下一帧该干什么”
- 自动节流 —— 隐藏标签页、系统节能模式下自动降频或暂停
- 无强制延迟抖动 —— 不像
setTimeout(fn, 16)实际可能延后 2–5ms
最简可用的 requestAnimationFrame 动画循环结构
核心是递归调用自身，并在每次回调中更新状态 + 渲染。别漏掉“停止条件”，否则无限执行：
let animationId = null;
const animate = () => {
// 更新逻辑：比如 this.x += this.speed
update();
// 渲染逻辑：比如 element.style.transform = `translateX(${this.x}px)`
render();
// 关键：下一次重绘前继续调用
animationId = requestAnimationFrame(animate);
};
// 启动
animationId = requestAnimationFrame(animate);
// 停止（例如离开页面或动画完成）
// cancelAnimationFrame(animationId);
- 必须把
requestAnimationFrame的返回值存起来，才能后续用cancelAnimationFrame中断 - 不要在回调里直接写
requestAnimationFrame(animate)而不赋值 —— 这会导致无法取消 - 更新（update）和渲染（render）应尽量轻量；重计算放 Web Worker，DOM 操作批量做
如何处理不同设备刷新率下的时间一致性
requestAnimationFrame 回调函数会接收一个高精度时间戳（DOMHighResTimeStamp），单位毫秒，从页面加载开始计时。用它计算真实经过时间，可让动画速度不随帧率浮动：
立即学习“Java免费学习笔记（深入）”；
let lastTime = 0;
const animate = (currentTime) => {
const deltaTime = currentTime - lastTime;
lastTime = currentTime;
// 例如：每秒移动 100px，则这一帧应移动 (100 deltaTime / 1000) px
this.x += this.speed deltaTime / 1000;
render();
requestAnimationFrame(animate);
};
- 不用
Date.now()—— 它精度低，且不受浏览器节流策略保护 - 避免用固定增量（如
this.x += 2）—— 在 30Hz 屏幕上会慢一半 - 如果动画需严格帧数控制（如 24fps 过场），仍需用时间戳做采样过滤，而非硬等帧
常见踩坑：CSS 动画 vs JS 动画的边界在哪
不是所有动效都该用 requestAnimationFrame 手写。浏览器对 CSS transform/opacity 的动画做了硬件加速和合成层优化，性能远超 JS 操控 style；而 JS 适合做需要动态逻辑判断的动画（比如跟随鼠标、物理模拟、数据驱动形变）。混用时尤其注意：
- CSS 动画正在运行时，JS 直接改
element.style.transform会强行中断 CSS 动画并覆盖，造成跳变 - 用
getComputedStyle读取 transform 值再解析 —— 成本高，且返回的是 matrix，非原始值 - 想用 JS 控制但保留 CSS 加速？优先用
transform: translateZ(0)或will-change: transform提前升层，再用requestAnimationFrame改style.transform
真正难的不是写循环，而是判断该不该用它、怎么跟 CSS 协同、以及如何让时间计算不漂移 —— 这些细节没处理好，60fps 的承诺就只是幻觉。
