RequestAnimationFrame的行为......它有效吗？

Question

我一直在玩chrome的requestAnimationframe，并想知道它的实际行为。

当我加载画布并绘制时，我得到稳定的60FPS。如果我使用偏移滚动，如点击并在地图上拖动，FPS将会下降（正如预期的那样）...一旦我停止在地图上拖动，FPS会再次按预期爬回到稳定的60fps。

这里有多少我想知道这是否为requestAnimationframe进行了分析。如果我拖动地图直到FPS下降，长时间跌落到30以下，一旦我停止拖动，它会向上攀升，但这次它会达到30FPS并且不会更高。似乎浏览器决定30FPS可能是最好的选择。

这是否由浏览器完成，我一直试图找出是否是这种情况。因为如果长时间不低于30fps，它会达到60fps。

Answer 1

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

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

说明为什么会这样：

如果供应商需要，

requestAnimationFrame()也与页面可见性API相关联（对Chrome来说非常正确） 基本上，如果页面不可见，他们可以将requestAnimationFrame()更新速度降低到每秒几次或完全暂停。

鉴于这些知识，相信两件事之一正在发生是完全合理的：

1. 他们故意以30fps封顶你，因为根据平均的效果数据，他们觉得你的体验会更加稳定

2. 他们故意扼杀你，但是系统中有一些错误（或者一些不那么宽松的数学运算）会阻止你在海岸清除之后回到60，并且如果他们< em> 使用平均性能数据，那么这可能是问题的一部分。

无论哪种方式，它至少都是故意的，唯一没有答案的问题是为什么它坚持30fps。 你事后20或30分钟就把它独自留下来，以后看看它是否随时都恢复了？

Answer 2

您可以从Chrome DevTools运行Timeframe分析，以寻找缩短动画时间的特立独行JS。
https://developers.google.com/chrome-developer-tools/docs/timeline

英国皇家空军将找到绘制您的更改的最佳位置，而不是最接近的更改。因此，如果RAF回调中的JS占用了两帧时间（在60hz硬件上每帧大约16ms），那么你的FPS将降至30。

来自Paul Irish by Boris
实际上，“它目前的上限为1000 /（16 + N）fps，其中N是回调执行所需的ms数。如果您的回调需要1000毫秒才能执行，那么它的上限低于1fps。如果您的回调需要1毫秒才能执行，那么大约需要60fps。“（thx，Boris） http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/