javascript - HTML5 游戏刷新率与 requestAnimationFrame

Question

我正在使用 HTML5 Canvas 和 JavaScript 开发游戏。初始 fps 还不错，但随着游戏的继续，fps 会下降。初始 fps 约为 45 fps，但后来降低至 5 fps。

以下是我的游戏循环

var last_draw = Date.now(); //To track when last time GameDraw was called last time
var fps;
function gameloop()
{
    var elapsed = Date.now() - last_draw;
    last_draw = Date.now()
    fps = 1000/elapsed;
    context.clearRect(0,0,canvas.height,canvas.width);// This function clears the canvas.
    GameUpdate();// This function updates property of all game elements.
    GameDraw(); //This function draws all visible game elements in the canvas.
    window.requestAnimationFrame(gameloop); //Requests next frame
}

window.requestAnimationFrame(gameloop); 

它已在以下浏览器中对此进行了测试:

1. Mozilla 火狐浏览器 32.0.3
2. 谷歌浏览器 38.0.2125.101 m

我的问题是:

1. 为什么随着比赛的进行，rAF 调用它的频率会降低？
2. 是否是由于内存泄漏？
3. 是否是因为 GameDraw 和 GameUpdate 花费的时间非常长？
4. 执行 Gamedraw 函数的时间与在 Canvas 中实际绘制元素所花费的时间不同。 Gamedraw调用每个游戏元素的draw函数。

Answer 1

您会发现很多有关优化 Canvas 性能的在线教程。这与使用这个或那个函数无关，而是与每两帧之间发生的处理量有关。

由于您的问题无法有一个可靠的答案，我将简要回答每个子问题:

Why rAF is calling it less frequently as the game continues?

就像你在下一个问题中猜测的那样 - 有些东西正在泄漏:它可能是任何东西，比如说，在每个周期中添加更多纹理、事件监听器、DOM 对象等......到简单地堆积太多 JS 对象因为它们仍然被引用，所以垃圾收集器无法删除它们。但最重要的是，您需要发现每两个帧之间正在变化/增加的内容。

Is it due to Memory leak?

很有可能，而且很容易测试。在 Chrome 中，Shift+Escape 打开任务管理器，您可以在其中查看每个打开的选项卡的内存、CPU 等使用情况。监控。

Is it because time taken by GameDraw and GameUpdate is very high?

绝对是这样!这也可能导致内存泄漏。学习做CPU和canvas分析，会对你有很大帮助。我相信 Chrome 中的 Canvas 分析仍然是一个实验性功能，因此您需要首先从配置标志中启用它。这两个函数是 99% 的延迟的来源，调查一下那里发生了什么。

Is time to execute Gamedraw function is different from time taken to actually draw elements in canvas. Gamedraw calls draw function of each game element.

这应该不重要，因为它们都是阻塞代码，这意味着一个只会在另一个之后发生。渲染一帧的时间大致是两者的总和。同样，适当的 Canvas 渲染优化可以在这里创造奇迹。