如何解决webkitRequestAnimationFrame给予极高的FPS

今天我一直在试图让自己熟悉HTML5所提供的任何东西，特别是画布。我来到了网站www.html5canvastutorials.com，并开始关注一些教程，并在不同的浏览器中对代码进行了一些改动。当我看到下面的例子时，我发现谷歌浏览器中有些奇怪的东西。 http://www.html5canvastutorials.com/advanced/html5-canvas-oscillation-animation/如何解决webkitRequestAnimationFrame给予极高的FPS

webkitRequestAnimationFrame函数应该有助于减少FPS（以及因此CPU成本），而不是主动在站点上，例如当您转到不同的选项卡时。但是，当我尝试这个例子时，我注意到这并不总是给人以愉快的结果。

谷歌浏览器作为活动窗口，在当前选项卡上的网站：大约60 FPS，太棒了！
谷歌浏览器作为活动窗口，在不同的选项卡上：获得约1 FPS，非常好。
Google Chrome作为活动窗口，在我的电视上（用作第二显示器），120 FPS，奇数，但没有投诉。
谷歌Chrome并不像活动窗口，但在不同的选项卡上，FPS左右也是如此，完美无缺。

那么坏的部分：如果我的网站是当前选项卡上，但我有另一个窗口完全覆盖谷歌浏览器窗口（例如说最大化的窗口），在FPS拍摄最多2500左右（和因此最多只有一个CPU内核）。

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

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

我想知道我怎样才能阻止这些可怕的CPU峰值如果有人有任何想法。预先感谢您的任何建议！

来源

2012-08-12 interest07

我见过类似的或多或少空requestAnimationFrame函数，看起来像是如果Chrome认为没有什么可做的事情触发requestAnimationFrame像地狱一样。您可以检查requestAnimationFrame的参数，如果过早延迟下一次setTimeout调用。 – noiv 2012-12-12 07:29:21

我无法在Chrome版本25.0.1364.152/OSX 10.8.2上重现此操作 – Jaibuu 2013-03-04 15:36:18

一种可能的解决方案是在模糊窗口时简单地取消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-01 11:00:16

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

来源

2015-07-17 07:44:10

如何解决webkitRequestAnimationFrame给予极高的FPS

回答

相关问题