如何解决 webkit RequestAnimationFrame 提供极高的 FPS答案

【问题标题】：How to solve webkitRequestAnimationFrame giving extremely high FPS如何解决 webkit RequestAnimationFrame 提供极高的 FPS
【发布时间】：2012-08-09 04:10:42
【问题描述】：

今天我一直在努力让自己熟悉 HTML5 所提供的任何新功能，尤其是画布。我来到网站 www.html5canvastutorials.com 并开始学习一些教程并在不同的浏览器中玩弄代码。当我看到下面的例子时，我注意到谷歌浏览器中有一些奇怪的东西。 http://www.html5canvastutorials.com/advanced/html5-canvas-oscillation-animation/

webkitRequestAnimationFrame 函数应该有助于在站点不活跃时降低 FPS（从而降低 CPU 成本），例如，当您转到不同的选项卡时。然而，当我尝试这个例子时，我注意到这并不总是能给出令人愉快的结果。

Google Chrome 作为活动窗口，当前选项卡上的站点：大约 60 第一人称射击，很棒！
Google Chrome 作为活动窗口，在不同的选项卡上：获取大约1 FPS，非常好。
Google Chrome 作为活动窗口，在我的电视上（用作第二台显示器），120 FPS，奇怪，但没有抱怨。
Google Chrome 不是活动窗口，而是在不同的选项卡上，也在 1 左右 FPS 左右，完美。

然后是不好的部分：如果我的站点在当前选项卡上，但我有另一个窗口完全覆盖了 google chrome 窗口（例如最大化窗口），则 FPS 最高可达 2500 左右（因此最大化一个 CPU 内核）。

当我在 Firefox 中尝试同一个站点时，一切正常。

这个小提琴是一个例子，它显示了自上次刷新以来的平均 FPS：http://jsfiddle.net/kmKZa/55/ （我几乎从教程网站复制了代码）

如果有人有任何想法，我想知道如何防止这些可怕的 CPU 峰值。提前感谢您的任何建议！

【问题讨论】：

我见过类似的类似的或多或少的空 requestAnimationFrame 函数，看起来如果 Chrome 认为没有什么可做的，它会像地狱一样触发 requestAnimationFrame。您可以检查 requestAnimationFrame 的参数，如果过早使用 setTimeout 延迟下一次调用。
我无法在 Chrome 版本 25.0.1364.152 / OSX 10.8.2 上重现此内容

标签： html google-chrome canvas frame-rate requestanimationframe

【解决方案1】：

一种可能的解决方案是在模糊窗口时简单地取消 AnimationFrame 循环，并在重新聚焦时再次请求它。

var isPaused = false,
    animFrame;

loop();

$(window)
    .on('focus', function() {
        if( isPaused ) {
            isPaused = false;
            loop();
        }
    })
    .on('blur', function() {
        cancelRequestAnimationFrame( animFrame );
        isPaused = true;
    });

function loop() {
    //your crazy loop code

    animFrame = requestAnimationFrame( loop );
}

【讨论】：

【解决方案2】：

RAF 在“空闲”时自动停止执行。你不需要停止 RAF 循环执行

【讨论】：