了解requestanimationframe [英] Understanding requestanimationframe

问题描述

我正在努力克服 requestanimationframe 。

说是否正确requestanimationframe 是一个浏览器API，它允许影响绘制的用户界面的逻辑在下一次到图形子系统的接口之前尽最大努力运行，以避免浪费由于物理屏幕刷新周期和应用程序渲染循环之间的相位差异，努力绘制从未进入屏幕的框架？

Is it correct to say that requestanimationframe is a browser API that enables logic that affects the painted user-interface to be run in a best-effort attempt to complete before the next blitting of the interface to the graphics subsystem, so as to avoid wasted effort painting frames that never make it to the screen due to phase differences between the physical screen refresh cycle and application rendering loop?

推荐答案

requestAnimationFrame只是一个方法，其中：

The requestAnimationFrame is just a method which:

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

The requestAnimationFrame method is used to signal to the user agent that a script-based animation needs to be resampled.

调用方法时：

当requestAnimatio调用nFrame（回调），用户代理必须
安排基于脚本的动画重新采样，方法是在动画帧请求回调列表的末尾附上
，句柄为
a user-agent - 大于零的定义整数，唯一
标识列表中的条目，其回调是回调。

When requestAnimationFrame(callback) is called, the user agent MUST schedule a script-based animation resampling by appending to the end of the animation frame request callback list an entry whose handle is a user-agent-defined integer greater than zero that uniquely identifies the entry in the list and whose callback is callback.

下一步是通过回调列表（除非已经在列表中的一个或多个ID调用了cancelAnimationFrame）之前 浏览器发布重绘。

The next step is to go through the callback list (unless a cancelAnimationFrame has been called for one or more of the IDs still in the list) before the browser issues a repaint.

Window.requestAnimationFrame（）方法告诉浏览器你
希望执行动画并请求浏览器调用
指定的函数来在下次重绘之前更新动画。

The Window.requestAnimationFrame() method tells the browser that you wish to perform an animation and requests that the browser call a specified function to update an animation before the next repaint.

rAF将同步每个回调这样每次重绘都适合显示器（或更确切地说是显示卡）的更新速率（VBLANK）。这基本上意味着在VBLANK发生后立即发出一个新的回调，这样脚本在下一次VBLANK触发之前有大约16.7ms完成渲染。

rAF will synchronize each callback so that each repaint fits the monitor's (or rather display card's) update rate (VBLANK). This basically means a new callback is issued right after a VBLANK has occurred so that the script has about 16.7ms to complete its rendering before next VBLANK triggers.

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

A setTimeout/setInterval is unable to synchronize with the monitor update as they can only take integer values. The usual update rate requires 16.67ms per frame @ 60 Hz, so you will get "jerks" from time to time using one of these methods as you would need to use either 16 or 17ms update rates.

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

rAF is not constricted by this. Since rAF is dealing with frame update list rather than the common event list, the browser can more efficiently purge the queue. The browser can also reduce the rate to f.ex. half if the browser tab is non-visible reducing the callbacks to half, which in turn reduces load.

没有要求使用图形子系统blit /重绘，但通常就是这种情况。

There is no requirement to use the graphics sub-system to "blit"/repaint, but this is usually the case.

这篇关于了解requestanimationframe的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！