RequestAnimationFrame调用时间根据我的画布大小而变化

Question

在我的应用程序中,我有一个CSS大小(CSS,而不是html)更新的画布,具体取决于窗口大小.

我有一个主要的gameplayLoop,看起来像这样:

run = function(){

    console.log(timerDiff(frameTime));

    game.inputManage();
    game.logics();
    game.graphics.animate();
    game.graphics.render();

    frameTime = timerInit();

    requestAnimFrame(run);

}

我的requestAnimFrame函数来自Paul Irish:

window.requestAnimFrame = (function(){
  return  window.requestAnimationFrame       || 
          window.webkitRequestAnimationFrame || 
          window.mozRequestAnimationFrame    || 
          window.oRequestAnimationFrame      || 
          window.msRequestAnimationFrame     || 
          function( callback ){
            window.setTimeout(callback, 1000 / 60);
          };
})();

所以基本上问题是我记录的定时器测量requestAnimFrame调用和有效函数调用之间的时间完全改变.如果我的浏览器是全屏的,我会得到50/60毫秒,如果我有一个小窗口,我可以达到10毫秒.

由于requestAnimFrame调用应该在60fps节奏下持续调用函数(我认为这类似于30 ms)我不应该有这种结果,因为在计时器的创建和检查之间基本上没有发生任何事情,除了requestAnimFrame

我也有一些反复的微冻结(不到一秒钟),每2/3秒发生一次.但是计时器没有检测到任何时间的变化(就像javascript的时间计数器被阻止一样)

我的定时器功能是这样的,但这并不重要

timerInit = function()
{
    return new Date();
}

timerDiff = function(datePrev)
{
    return new Date().getTime() - datePrev.getTime();
}

Answer 1

好吧,该标准基本上表示requestAnimationFrame将"尽力"以"一致"的帧速率运行.这不能保证60fps; 它只是说它会尽可能快地制作动画.

不幸的是,到目前为止,我对它的体验与你的一样黯淡.我最终回去了setTimeout.它的速率大致相同,图形更新是准确的,不会像他们那样跳过节拍requestAnimationFrame.当然它不是60fps,但至少你可以知道发生了什么.

我确信性能只会随着浏览器开发人员优化新功能而提高,但暂时考虑回到timeouts.

编辑:我想提醒一下,这是一年前回答的,时代已经改变:)