了解requestanimationframe

Ben*_*Ben 2 javascript requestanimationframe

我正在努力克制requestanimationframe.

说这requestanimationframe是一个浏览器API 是否正确,它使得影响绘制的用户界面的逻辑能够在下一次到图形子系统的接口之前尽力完成,以避免浪费精力绘画由于物理屏幕刷新周期和应用程序渲染循环之间的相位差异,从未进入屏幕的帧?

小智 5

requestAnimationFrame只是一个方法:

requestAnimationFrame方法用于向用户代理发信号通知需要重新采样基于脚本的动画.

调用方法时:

当调用requestAnimationFrame(回调)时,用户代理必须通过在动画帧请求回调列表的末尾附加一个条目来调度基于脚本的动画重新采样,该条目的句柄是大于零的用户代理定义的整数,唯一标识列表中的条目,其回调是回调.

下一步是在浏览器发出重绘之前,通过回调列表(除非为列表中的一个或多个ID调用了cancelAnimationFrame).

Window.requestAnimationFrame()方法告诉浏览器您希望执行动画并请求浏览器调用指定的函数以在下次重绘之前更新动画.

rAF将同步每个回调,以便每次重绘符合显示器(或更确切地说是显示卡)的更新速率(VBLANK).这基本上意味着在VBLANK发生后立即发出新的回调,以便脚本在下一次VBLANK触发之前有大约16.7ms完成其渲染.

A setTimeout/ setInterval无法与监视器更新同步,因为它们只能获取整数值.通常的更新速率要求每帧16.67ms @ 60 Hz,因此您将不时使用这些方法中的"jerks",因为您需要使用16或17ms的更新速率.

rAF不受此限制.由于rAF处理帧更新列表而不是公共事件列表,因此浏览器可以更有效地清除队列.浏览器还可以将速率降低到f.ex. 如果浏览器选项卡不可见,则返回一半,将回调减少一半,从而减少负载.

没有要求使用图形子系统来"blit"/重绘,但通常情况就是如此.