哪个队列与 requestAnimationFrame 关联？

Question

今天面试时被问到这个问题。我无法回答这个问题，面试官说有一个特殊的队列用于 requestAnimationFrame 回调。但我找不到这方面的信息。

如果 rAF 有自己的队列，那么为什么这个队列从未在任何地方被提及？当我们谈论事件循环时，我们只提到宏任务队列和微任务队列？

您能否解释一下或分享有关 rAF 的精彩视频/文章的链接？

Answer 1

requestAnimationFrame

特定于 Web API。作为参数给出的回调被收集在有序映射中，HTML 标准将其标识为动画帧回调映射。该地图与 HTML 文档相关联（或者在专用网络工作者的情况下与全局范围相关联）。

这个map（可以理解为一个队列），当前任务完成后进行处理，包括微任务队列的处理。该地图作为事件循环的rendering阶段的一部分被消耗。 HTML 标准指定渲染过程的第 13 步：

13. 对于 docs 中的每个完全活动的文档，运行该文档的动画帧回调，传入 now 作为时间戳。

因此，“哪个队列”的简短答案是：HTML 标准中指定的动画帧回调映射。

Answer 2

requestAnimationFrame 有自己的队列，与 DOM 事件分开。事件在事件循环的渲染阶段被调用。

规范将其称为“动画帧请求回调列表”——尽管我不希望除了浏览器开发人员之外的任何人能够在面试情况下背诵这个名字！对于大多数 Web 开发人员来说，这是浏览器内部的细节，通常不会影响日常工作；我很惊讶这被用作面试问题（除非您正在面试浏览器开发人员的工作。）

这是一个重复的（但未回答的）问题，其中在评论中还有一些您可能会觉得有用的链接。

Answer 3

关于与

requestAnimationFrame

 相关的队列的问题：

rAF callbacks do not have their own separate queue

。相反，它们是在浏览器事件循环的特定阶段内执行的。此阶段称为事件循环的 

rendering phase

 或 

paint phase

。

以下是一些链接：

1. https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame
2. https://web.dev/animations-guide/
3. https://www.youtube.com/watch?v=8aGhZQkoFbQ