requestAnimationFrame（rAF）提升渲染性能的核心在于对齐浏览器刷新周期、避开主线程阻塞、减少无效计算；它天然同步V-Sync，帧率更稳（59±1 fps），支持后台暂停与动态降帧，并需配合批量更新、合成层优化及严格生命周期管理。
用 requestAnimationFrame（rAF）提升页面渲染性能，核心不是“调用了它”，而是让它真正嵌入浏览器的渲染节奏中——对齐重绘时机、避开主线程阻塞、减少无效计算。它不直接加速代码，但能让动画和视觉更新更省、更稳、更准。
对齐浏览器刷新周期，避免掉帧和抖动
显示器每秒刷新约60次（16.7ms/帧），rAF 的回调总在下一次重绘前触发，天然与 V-Sync 同步。而 setTimeout(16) 只是“尽力执行”，可能因主线程繁忙被延迟，导致多帧合并或跳帧。
- 实际表现：rAF 帧率稳定性达 59±1 fps，
setInterval仅 43±12 fps - 关键操作：在 rAF 回调开头就调用
requestAnimationFrame(animate)，确保下一帧注册及时，不因当前帧耗时长而断连 - 避免在回调里读写混用布局属性（如先
offsetTop再改style.left），否则触发强制同步布局（layout thrashing）
自动节能：后台暂停 + 动态降帧
rAF 不是“拼命跑”，而是由浏览器智能调度：
- 标签页切到后台时，回调自动暂停，CPU/GPU 占用直降 —— 移动端功耗从 220mW/s 降到 85mW/s
- 系统负载高时，浏览器可主动降帧（如 60fps → 30fps），而非丢帧卡顿
- 无需手动监听
visibilitychange来开关动画，rAF 本身已内置该行为（Chrome/Firefox/Edge 全支持）
批量更新 + 渲染优化组合技
rAF 提供的是“一帧内集中处理”的机会，要配合其他优化才能发挥最大效果：
立即学习“Java免费学习笔记（深入）”；
- 把多个 DOM 更新（位置、透明度、缩放）合并到同一个 rAF 回调里，避免多次重排重绘
- 用
transform和opacity触发合成层，避免触发布局；必要时加will-change: transform - 高频事件（如
scroll、resize）中不直接处理逻辑，而是用 rAF 节流：“只在下一帧更新一次” - 大量节点插入时，搭配
DocumentFragment批量操作，将渲染开销从 1200ms 降到 200ms 级别
必须做好的生命周期管理
rAF 本身不管理状态，漏掉清理就会内存泄漏或持续占用资源：
- 用变量保存帧 ID：
let animationId = null - 每次回调开头检查目标元素是否还存在：
if (!el || !el.isConnected) return - 停止时务必调用
cancelAnimationFrame(animationId)，并置空变量 - 基于时间驱动（用
timestamp算deltaTime），而非依赖帧数计数，防止帧率波动影响动画速度
