请求动画帧处理序列

requestAnimationFrame processing sequence

本文关键字：处理 动画 请求      更新时间：2023-09-26

如果我有以下代码：

window.requestAnimationFrame(animation1); //animation1 takes more than 16.67ms, misses the frame.
window.requestAnimationFrame(animation2); //animation2 takes 1ms to execute

假设animation1和animation2是简单的变色动画，这是否意味着animation2会在animation1之前出现在屏幕上？

还是对requestAnimationFrame的调用堆叠在浏览器队列中，后续调用仅在上一个调用完成时执行？

TL;DR

animation1 将始终在调用 animation2 之前运行完成，但如果其中任何一个花费的时间太长，浏览器可能不会调用它们中的任何一个一两个帧。

requestAnimationFrame规范说：

调用 requestAnimationFrame（） 方法时，用户代理必须运行以下步骤： ...

    将方法的参数追加到文档的动画帧回调
  1. 列表中，该回调与文档的动画帧回调标识符的当前值相关联。

和：

当用户代理要为现在具有时间戳的文档文档运行动画帧回调时，它必须运行以下步骤：

    让回调
  1. 是 doc 的动画帧回调列表中的条目列表，按照它们添加到列表中的顺序排列。

因此，我们可以通过运行来看到：

window.requestAnimationFrame(animation1);
window.requestAnimationFrame(animation2);

您正在排队animation1，animation2下次调用"用户代理将运行动画帧回调"。

该时间被指定为主事件循环的一部分：

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

但是在此之前，它指定：

  1. 如果用户代理认为此时更新其呈现不会从顶级浏览上下文 B 中受益，则从文档中删除浏览上下文的顶级浏览上下文为 B 的所有 Document 对象。

这意味着如果您的回调花费的时间太长，它可能会决定丢弃帧而不运行它们。 但是，由于所有请求的帧都是在步骤 9 中一个接一个地执行的，因此您应该始终在 animation2 之前看到 animation1 的结果，但浏览器可能会决定从其呈现循环中删除整个文档，并且在通过事件循环进行后续迭代之前不调用队列中的任何一种方法。

相关文章：