rAF 专为动画设计，天然对齐屏幕刷新节奏，自动匹配设备帧率、后台暂停、渲染前执行；定时器是通用异步工具，不感知渲染管线，易卡顿掉帧、无法保证渲染时机。
定时器（setTimeout/setInterval）和 requestAnimationFrame（简称 rAF）都能驱动动画，但核心差异在于**调度机制、帧率控制与浏览器协同程度**。rAF 是专为动画设计的 API，天然对齐屏幕刷新节奏；而定时器是通用异步工具，不感知渲染管线，容易导致卡顿或掉帧。
帧率与刷新同步性
rAF 会自动匹配设备的屏幕刷新率（通常是 60Hz，即约每 16.67ms 一帧），且在页面不可见时暂停调用，节省资源。定时器则按设定毫秒数硬执行，比如 setInterval(fn, 16) 看似“模拟 60fps”，实际可能因 JS 执行阻塞、任务队列延迟等原因，造成回调堆积或跳帧。
- rAF 回调总在浏览器下一次重绘前触发，确保 DOM 更新能被及时渲染
- 定时器回调时间点不可控：若上一帧耗时过长，下一帧可能被挤压甚至丢弃
- 标签页切到后台时，rAF 自动暂停；
setInterval在多数浏览器中仍运行（除非被节流），浪费 CPU
执行时机与渲染保证
rAF 的回调发生在“样式计算 → 布局 → 绘制”流程之前，属于渲染帧的“动画阶段”，适合做属性变更（如修改 transform 或 opacity）；定时器回调处于事件循环任意空闲时刻，无法保证是否赶上下一帧渲染。
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
- 用 rAF 修改样式后，浏览器有机会在当次绘制中合并变更，减少重排重绘
- 定时器中频繁操作 DOM（尤其触发布局计算）易引发强制同步布局（Layout Thrashing）
- 若需精确控制动画起始/结束逻辑（如缓动函数完成判断），rAF 配合
performance.now()更可靠
兼容性与使用模式
rAF 支持所有现代浏览器（IE10+），兼容性已不是问题；定时器虽更老，但缺乏动画语义。使用上，rAF 是单次调用，需手动递归；定时器可周期自动执行，但需额外清理。
立即学习“Java免费学习笔记（深入）”；
- rAF 推荐写法：
function animate() { /* 动画逻辑 */ if (stillRunning) requestAnimationFrame(animate); } - 定时器用于动画时，务必用
clearInterval或clearTimeout显式销毁，避免内存泄漏 - 非视觉任务（如轮询接口、倒计时显示）仍适合定时器；纯视觉动画优先选 rAF
性能与开发者体验
Chrome DevTools 的“Rendering”面板可直观看到 rAF 动画是否稳定维持 60fps；定时器动画若出现绿色长条（Long Tasks），说明主线程被阻塞。rAF 还支持浏览器自动降帧（如低端设备降至 30fps），而定时器需手动适配。
- 开启“FPS Meter”可实时观察两种方式的实际帧率表现
- rAF 不会因 JS 长任务直接丢帧，而是推迟到下一帧；定时器则可能连续触发多个回调挤占主线程
- 动画暂停/恢复逻辑用 rAF 更自然：取消当前帧即可，无需管理 timer ID
