Javascript RequestAnimationFrame行为..它是如何工作的？

我一直在玩chrome的requestAnimationframe，想知道它实际上是如何工作的

当我加载画布并画图时，我的速度稳定在60帧/秒。如果我像在地图上单击并拖动一样使用偏移来滚动，FPS将下降（如预期的那样）…一旦我停止在地图上拖动，FPS将恢复到稳定的60 FPS，再次如预期的那样

在这里，我想知道这是否是为requestAnimationframe进行的重新调试。如果我拖动地图直到FPS下降，在很长一段时间内下降到30以下，一旦我停止拖动，它会向上爬，但这次它达到了30FPS，不会再往上爬。似乎浏览器决定30FPS可能是最好的选择

---

这是由浏览器精心完成的，我一直在试图找出是否是这样。因为如果我不长时间低于30fps，它将达到60fps。

是的，这是浏览器能够做到的。
“它应该如何工作”并不是任何人都能回答的问题

原因很简单，就是引擎盖下100%特定于浏览器。
但可以肯定地说，浏览器能够决定何时锁定30Hz刷新，而不是60Hz刷新

说明为什么会出现这种情况：

requestAnimationFrame（）

如果供应商愿意，也会绑定到页面可见性API中（对于Chrome来说非常正确）。
基本上，如果页面不可见，它们可以将

requestAnimationFrame（）

更新速度降低到每秒几次或完全暂停

鉴于这些知识，完全有理由相信两件事中的一件正在发生：

他们故意将你的体验限制在30帧/秒，因为他们觉得基于平均性能数据，你的体验会更稳定

他们故意限制你，但是系统中有一些错误（或者一些不太宽容的数学），在海岸线清理后，阻止你回到60。如果他们使用的是平均性能数据，那么这可能是问题的一部分

不管怎样，它至少主要是有意为之，唯一未回答的问题是为什么它坚持30帧。

---

您是否在事件发生后的20或30分钟内将其单独放置，以查看它是否在之后的任何时间重新启动？

您可以从Chrome DevTools运行时间框架分析，以查找减慢动画时间的特立独行JS。

英国皇家空军会找到最好的地方来描绘你的变化，而不是最近的。因此，如果RAF回调中的JS占用了相当于两帧的时间（在60hz硬件上大约每帧16ms），那么FPS将降至30

保罗·爱尔兰通过鲍里斯
事实上，“目前的上限为1000/（16+N）fps，其中N是回调执行所需的毫秒数。如果回调执行所需时间为1000毫秒，则上限为1fps以下。如果回调执行所需时间为1毫秒，则约为60 fps。”（thx，Boris）

---

我留了整整15分钟。我不知道有什么像样的方法来分析英国皇家空军会保持这么低的水平。好吧，这不是“那么低”。30Hz是60Hz的下一步，假设您正在处理vSync。最初，英国皇家空军的呼叫没有同步到监控刷新，但我认为这是一个解决了的问题。因此，在v-sync的情况下，您的选项是60fps、30fps、20fps、15fps、12fps、10fps……它仍然无法解释为什么它保持在30，而在经过大量处理后可以返回到60。如果一个过程使其下降到10，那么逻辑上整个动画将保持在10fps，而在密集过程完成后，它可能会更平滑。这让英国皇家空军做出了一个糟糕的选择