带有canvas的html5游戏，firefox上的性能问题（4）

Question

目前我正在开发一个名为“tunnel 2”的js/canvas小游戏（我很确定这个游戏有一个众所周知的一年前版本，但我不知道）。您可以在这里尝试游戏。另外，我推荐 chrome。

所以，我在谷歌浏览器中开发，即使在我蹩脚的旧机器上，它也能正常工作。我的帧率约为 30 fps。在我同事的笔记本上，它的速度> 100 fps。到目前为止，一切都很好。 Safari 似乎也运作良好。

接下来我在 firefox 4 beta 10 上尝试了...但我只能得到约 10 fps。但 ff4 肯定不会那么慢，对吧？

我开始调查。这是我的主循环：

// starts the game loop
this.run = function () {
  this.draw();

  var
    t = this,
    timeLastTurn,
    timeThisTurn = (new Date()).getTime()-1;

  var loop = function () {
    timeLastTurn = timeThisTurn;
    timeThisTurn = (new Date()).getTime();

    // dt is the time difference between this turn and the last turn
    var dt = timeThisTurn - timeLastTurn;

    // player movement etc
    t.turn(dt);

    // draw game state
    var res = t.draw();

    // if there's no collision, game over
    if (!res.collision)
      t.setState(2);

    // actually, there's a browser dependent minimum timeout that
    // may vary. but even if it's more than 10ms - we don't care.
    // game should run at the same speed (though not as smooth)
    if (gameState == 1)
      timer = window.setTimeout(loop, 5);

    // just debug output
    debug = dt;
  }

  // start the main loop
  loop();
}

我观察到的：

毫不奇怪，this.draw(); 是迄今为止最昂贵的函数，但在 chrome 上只需要几毫秒（实际上大约 5 毫秒）... 也可以在 Firefox 上。微不足道的 10fps 所需的时间远不及 >100ms！整个 loop() 调用也花费不了多少时间，在 Firefox 上花费的时间不到 10 毫秒！

如果您研究dt，就会发现差异。它应该在 time-loop()-takes+5ms 超时左右（或浏览器最小超时值）。

但在 ff4 上，该值接近 180 毫秒，即下一个超时事件在 170 毫秒内触发，而不是 5 毫秒！如果你玩的时间长一点，单帧的时间会达到约 800 毫秒（当然是 gc），然后又回到 180 毫秒。

有人知道罪魁祸首是什么吗？

是GC的错吗？一方面，我不认为我创建了太多短暂的变量，嘿，每次 150 毫秒！？但当然可能是这样。有没有简单的方法来检查这个？ chrome 分析器会记录 gc 时间（大约 0.10%），但 firebug 分析器不会。

同样有趣的是：启用 Firebug 后游戏运行速度更快（~5fps）。

添加。信息：使用 setInterval 而不是 setTimeout 不应该也不会改变任何内容。

Answer 1

我可以确认它无法在 FF 3.6.13 OS X 上运行。

当我开发 Snake JS 时，我发现 setInterval 行为存在差异。您确实应该看看这个：

var timer = setInterval(fn, 500)
// ...
timer = setInterval(fn, 500)
// Since I didn't use clearInterval() I now have two timers running in FF.

我看到您没有使用 setInterval，但也许它与 setTimeout 类似？

Answer 2

在处理 Firefox 6 及以下版本时，我构建和使用的一些高端画布应用程序遇到了重大问题。 Firefox 中存在许多涉及性能以及画布功能较差或完全不受支持的问题。他们确实在 Firefox 7 中进行了重大更新，改进了您可能注意到的许多问题。这有点烦人，我需要在一个巨大的基于 facebook 画布的应用程序上支持低至 ff4 的功能，而该应用程序在 6 及更低版本中运行得不太好。我做了很多事情来尝试解决与性能相关的问题，但大多数事情都很难找到解决方案。