Question

今天我一直在努力让自己熟悉HTML5所提供的任何东西，特别是画布。我来到网站www.html5canvastutorials.com并开始关注一些教程，并在不同的浏览器中使用代码。当我得到以下示例时，我注意到谷歌浏览器中有些奇怪的东西。 http://www.html5canvastutorials.com/advanced/html5-canvas-oscillation-animation/

webkitRequestAnimationFrame函数应该有助于在不在站点上主动时减少FPS（从而降低CPU成本），例如当您转到其他选项卡时。然而，当我尝试这个例子时，我注意到这并不总能显示出令人愉快的结果。

谷歌浏览器作为活动窗口，当前标签上的网站：大约60 FPS，太棒了！
Google Chrome作为活动窗口，在另一个标签上：获取大约1 FPS，非常好。
谷歌浏览器作为活动窗口，在我的电视上（用作第二台显示器），120 FPS，奇数，但没有投诉。
Google Chrome不是活动窗口，而是在另一个标签上，也是1左右 FPS左右，完美。

那么坏的部分：如果我的网站位于当前选项卡上，但我有另一个窗口完全覆盖谷歌浏览器窗口（例如最大化窗口），则FPS最多可以拍摄2500（因此最多可以占用一个CPU内核）。

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

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

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

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

Answer 2

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

如何解决webkitRequestAnimationFrame给出极高的FPS

2 个答案: