requestAnimationFrame() 调用是否在浏览器选项卡/窗口之间共享？答案

【问题标题】：Are requestAnimationFrame() calls shared between browser tabs/windows?requestAnimationFrame() 调用是否在浏览器选项卡/窗口之间共享？
【发布时间】：2014-11-14 08:45:00
【问题描述】：

我注意到，当我在 YouTube 上（在 Chrome 中）播放视频时，我使用 CreateJS 开发的 HTML5 游戏运行的帧速率是通常的一半。

本身，在桌面上 - 运行 60fps 没问题。

YouTube 视频正在播放？ 30fps！

奇怪的是，我似乎无法在另一台机器上重现该问题。是否与不同的显卡/驱动程序响应 requestAnimationFrame 调用的方式有关？

【问题讨论】：

你为什么对此感到惊讶？它是一台带有一个 CPU 的计算机。它一次只能做这么多。
这就像在说“好吧，如果我同时运行程序 B，我的操作系统运行程序 A 的速度会慢 50%。”我们生活在多线程 CPU 周期、多核的现代。所以不，我不认为英国皇家空军要求它一次做太多事情：P
我什至不知道“多线程 CPU 周期”是什么意思。多线程意味着机器拥有无限资源？如果机器负载很重，程序确实会运行得更慢，其他条件相同。
所以你的意思是因为一个视频在 YouTube 的一个窗口中播放，我的 RAF 在另一个浏览器窗口中调用一半因为我的 12 核 CPU 是 为保持 60fps 的运行速度而苦恼？
就其本身而言，RAF 是相当轻量级的。它只是管理一个请求队列并在有机会时调用它们。因此，唯一合乎逻辑的解释是，实际上浏览器/选项卡的周期越来越少，并且到达其处理管道中的点以较少地调用排队的 RAF 函数。除此之外，很难说，尤其是因为正如您所说，该问题在其他机器上无法重现。

标签： javascript google-chrome createjs frame-rate requestanimationframe

【解决方案1】：

RequestAnimationFrame 不适用于显卡或驱动程序级别。这是一个特定于浏览器的软件概念，有时可以要求浏览器调用程序来执行一些渲染任务，这些任务会根据浏览器在其处理管道中的位置进行优化，并且比旧的替代方案（如@）具有更高的精度987654321@.

正如@markE 正确指出的那样，当一个选项卡不活动时，RAF 会暂停，因此不存在与多个选项卡中的 RAF 相关的性能问题。事实上，在非活动选项卡中暂停基于 RAF 的动画的能力是引入它的动机之一。

但是，YouTube 不使用 RAF。据我所知，YouTube 视频继续在后台标签中播放。图形子系统完成了大部分工作，但 CPU 也参与其中；像素必须从某个地方引入并馈送到图形系统。在多核 CPU 上，新进程理论上可能能够使用未充分利用的内核，但最终 CPU 资源是有限的。它要做的工作越多，一切都会越慢，特别是它可以用于浏览器或运行浏览器选项卡的特定线程的资源就越少。所以是的，你会看到这样的放缓一点也不奇怪。

【讨论】：

很好的答案！是否可以在选项卡不活动时启用 RAF？
据我所知，这是浏览器实现问题。

【解决方案2】：

没有。不同的浏览器选项卡不共享 RAF 调用。

如果您有 2 个浏览器选项卡，每个选项卡都有一个 RAF 循环，则获得焦点的选项卡将运行其 RAF 循环，而未获得焦点的选项卡将停止其 RAF。

但是，如果您在单个浏览器选项卡上有多个 RAF 调用，所有这些 RAF 调用将合并到与显示刷新同步的单个执行中。

【讨论】：

如果选项卡位于不同的窗口中（并排）怎么办？它们会以全帧速率运行吗？
如果选项卡位于浏览器的不同实例中，则动画将继续播放。
好的。非常感谢您对英国皇家空军的洞察力。不幸的是，我仍然不明白我分别运行的两个选项卡是如何导致 HTML5 游戏中的帧率下降的。我想我会删除这个问题并在另一个问题中重新表述。