raf 比定时器更合适，因其由浏览器统一调度至下一次重绘前执行，适配屏幕刷新率、自动暂停于非活跃状态，并避免掉帧与卡顿；而 settimeout 仅尽力按间隔调用，易受阻塞影响。
用 requestAnimationFrame（简称 rAF）替代 setTimeout 或 setInterval 来驱动动画，能让浏览器把动画帧精准调度到下一次屏幕刷新前执行，从而实现 60fps 的流畅渲染。
为什么 rAF 比定时器更合适
rAF 不是“固定间隔执行”，而是由浏览器统一协调：它会把回调排队在下一次重绘之前，并自动根据屏幕刷新率（如 60Hz → ~16.7ms/帧）调整时机。当页面不可见、标签页失焦或系统资源紧张时，rAF 还会暂停调用，避免无效计算和耗电。而 setTimeout(fn, 16) 只是“尽量每 16ms 调一次”，实际可能因 JS 执行阻塞、任务队列延迟等原因掉帧，甚至连续触发多次再集体绘制，造成卡顿或撕裂。
基础用法：递归调用形成动画循环
rAF 是一次性调用，要持续动画就得在回调里再次请求自己：
function animate() {
// 更新动画状态（比如修改元素 left/top、transform）
element.style.transform = `translateX(${x}px)`;
<p>// 请求下一帧
requestAnimationFrame(animate);
}</p><p>// 启动动画
requestAnimationFrame(animate);
</p>- 不要在循环外用
for或while反复调用 rAF——它不阻塞主线程，那样会瞬间注册成百上千个帧回调，直接卡死 - 每次回调中只做必要更新（计算 + 设置样式），避免同步 DOM 查询（如
offsetTop）或复杂计算；耗时逻辑可拆分或用Web Worker - 记得在不需要时取消：保存 rAF 返回的 ID，用
cancelAnimationFrame(id)停止（比如用户离开页面、动画条件结束）
结合时间戳实现匀速动画
rAF 回调会传入一个高精度时间戳（DOMHighResTimeStamp），单位毫秒，表示当前帧开始时间。用它计算真实经过时间，就能让动画速度与设备性能无关：
let startTime = performance.now();
const duration = 2000; // 动画总时长 2s
<p>function animate(currentTime) {
if (!startTime) startTime = currentTime;</p><p>const elapsed = currentTime - startTime;
const progress = Math.min(elapsed / duration, 1); // 归一化进度 [0, 1]</p><p>element.style.transform = <code>translateX(${progress * 300}px)</code>;</p><p>if (progress </p><p>requestAnimationFrame(animate);
</p>- 用
performance.now()初始化起点比Date.now()更精确（微秒级） - 避免用帧数计数（如 “第 120 帧”）控制进度——不同设备帧率不同，会导致快慢不一
- 时间戳也方便做缓动函数（ease-in-out）、暂停恢复、倒播等高级控制
与 CSS 动画/Transition 的配合建议
rAF 主要用于需要 JavaScript 动态控制的场景（比如跟随鼠标、物理模拟、滚动联动）。如果只是简单位移、缩放、透明度变化，优先用 CSS transition 或 @keyframes：
- CSS 动画由合成器线程处理，不触发 Layout 和 Paint，性能更高
- rAF 适合“JS 驱动 + CSS 应用”模式：用 JS 计算目标值，用
transform和opacity这类可硬件加速的属性去设置，避免触发布局（Layout） - 避免在 rAF 中频繁读写同一元素的几何属性（如先
el.offsetTop再el.style.left），这会强制同步回流（forced reflow），严重拖慢帧率
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
