requestAnimationFrame处理序列

Question

如果我有以下代码：

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的呼叫是否堆叠在浏览器队列中，后续呼叫只会在上一次呼叫结束时执行？

Answer 1

<强> TL; DR

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

requestAnimationFrame的{​​p> The specification说：

  

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

     

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

和

  

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

     

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

所以我们可以看到通过运行：

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

您正在排队animation1和animation2，以便下次＆＃34;用户代理将运行动画帧回调＆＃34; 。< / p>

那个时间is specified作为主要事件循环的一部分：

  

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

但在此之前，它指定：

  

  
1. 如果有一个顶级浏览上下文B，用户代理认为此时无法从渲染更新中获益，则从文档中删除浏览上下文的顶级浏览上下文所有的所有Document对象乙
  

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