requestAnimationFrame

requestAnimationFrame 是浏览器提供的一个用于优化动画的 API。它请求浏览器在下一次页面重绘之前执行指定的回调函数,使动画更新与显示器的刷新节奏保持同步,从而获得平滑的视觉效果。

概述

在该 API 出现之前,网页动画多用定时器按固定间隔更新画面,但定时器与浏览器的实际绘制时机并不对齐,容易造成掉帧、卡顿或多余的重绘。requestAnimationFrame 将回调交由浏览器统一调度,在最恰当的时机(通常约每秒 60 次,并随刷新率自适应)执行动画逻辑。

核心原理

• 调用时传入回调,浏览器在下一帧绘制前执行它,并向回调传入高精度时间戳。
• 要持续动画,需在回调内部再次调用自身,形成逐帧循环。
• 当页面处于后台标签页或不可见时,浏览器会自动暂停或降低调用频率,节省资源与电量。
• 返回的句柄可用于 cancelAnimationFrame 取消尚未执行的帧回调。

应用场景

requestAnimationFrame 是编写高性能网页动画的标准方式,广泛用于逐帧动画、滚动视差、canvas 与游戏循环、平滑滚动、以及将高频事件(如滚动、鼠标移动)的处理节流到每帧一次,避免过度计算导致的卡顿。

常见问题

问:它和 setInterval 做动画有何区别?答:setInterval 按固定时间触发,与绘制不同步,易掉帧且后台仍运行;requestAnimationFrame 与重绘同步,更流畅,页面不可见时会自动暂停。

问:如何控制动画速度不受刷新率影响?答:利用回调传入的时间戳计算相邻两帧的时间差,按实际经过的时间来推进动画,可在不同刷新率设备上保持一致速度。