如何解决webkitRequestAnimationFrame导致极高的FPS问题

Question

今天我一直在尝试了解HTML5提供的任何新功能，特别是画布。我发现了网站www.html5canvastutorials.com并开始跟随一些教程，并在不同的浏览器中玩弄代码。当我到达以下示例时，我注意到在Google Chrome中有些奇怪。http://www.html5canvastutorials.com/advanced/html5-canvas-oscillation-animation/ webkitRequestAnimationFrame函数应该帮助减少FPS（因此降低CPU成本），例如当您转到其他选项卡时，但是当我尝试这个示例时，我注意到这并不总是产生令人愉快的结果。

• Google Chrome作为活动窗口，当前标签上的站点：获得约60 FPS，非常好！
• Google Chrome作为活动窗口，在不同的标签上：获得约1 FPS，非常好。
• Google Chrome作为活动窗口，在我的电视上（用作第二个显示器），120 FPS，有点奇怪，但没有抱怨。
• Google Chrome不是活动窗口，但在另一个标签中，也约为1 FPS，完美。

然后是坏的部分： 如果我的站点在当前标签上，但我有另一个窗口完全覆盖了Google Chrome窗口（例如最大化的窗口），FPS会飙升到约2500（从而使一个CPU核心达到最大值）。

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

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

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

- interest07

---

我曾经看到过类似的情况，其中requestAnimationFrame函数几乎为空，看起来像是Chrome认为没有什么要做的，就会不停地触发requestAnimationFrame。您可以检查requestAnimationFrame的参数，如果太早，则使用setTimeout延迟下一次调用。 - Torsten Becker

我无法在Chrome版本25.0.1364.152 / OSX 10.8.2上重现此问题。 - Jaibuu

Answer 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 );
}

- Ti Hausmann

Answer 2

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

- Gleb Mikheev