3

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

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

  • 谷歌浏览器作为活动窗口，当前选项卡上的站点：获得大约 60 FPS，太棒了！
  • 谷歌浏览器作为活动窗口，在不同的选项卡上：获得大约 1 FPS，非常好。
  • 谷歌浏览器作为活动窗口，在我的电视上（用作第二台显示器），120 FPS，奇怪，但没有抱怨。
  • 谷歌浏览器不是活动窗口，而是在不同的选项卡上，也大约 1 FPS 左右，完美。

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

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

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

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

4

2 回答 2

0

一种可能的解决方案是在模糊窗口时简单地取消 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 );
}
于 2013-08-01T11:00:16.900 回答
0

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

于 2015-07-17T07:44:10.710 回答