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

Question

目前我正在开发一款名为“隧道 2”的小型 js/canvas 游戏（我很确定有一个众所周知的旧版本，但我不知道）。你可以try the game here。另外，我会推荐 chrome。

所以，我在 google chrome 中开发，它工作正常，即使在我蹩脚的旧机器上也是如此。我得到大约 30 fps。在我同事的笔记本上，它产生 >100fps。到目前为止，一切都很好。 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(); 是迄今为止最昂贵的功能，但它只需要几毫秒（实际上大约 5），在 chrome ... 和 firefox 上。远不及> 100毫秒，这将需要微不足道的10fps！整个loop() 调用也不会花费太多时间，在 Firefox 上只需不到 10 毫秒！

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

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

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

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

也很有趣：游戏在启用 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 及更低版本中并不能很好地工作。我已经做了很多事情来尝试解决与性能相关的问题，但对于大多数事情来说真的很难找到解决方案。