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);

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

Mozilla Firefox 32.0.3
Google Chrome 38.0.2125.101 m

我的问题是：

为什么rAF在游戏继续进行时不那么频繁地调用它？
是否是由于内存泄漏造成的？
是因为GameDraw和GameUpdate的时间非常长吗？
执行Gamedraw功能的时间与在canvas中实际绘制元素所花费的时间不同。 Gamedraw调用每个游戏元素的绘制功能。

Answer 1

你会发现很多关于优化画布性能的在线教程。这不是关于使用这个或那个函数，而是关于每两帧之间发生的处理量。

由于你的问题没有一个可靠的答案，我将简要介绍每个子问题：

为什么rAF在游戏继续进行时不那么频繁地调用它？

就像你在下一个问题中猜到的那样 - 有些东西正在泄漏：它可能是任何东西，比如说，在每个循环中添加更多纹理，事件监听器，DOM对象等......只是让太多的JS对象堆积起来因为它们仍然被引用，所以垃圾收集器无法摆脱它们。但最重要的是，您需要发现每两帧之间正在发生变化/变化的情况。

是否由于内存泄漏？

非常可能，而且很容易测试。在Chrome中， Shift + Escape 会打开任务管理器，您可以在其中查看每个打开的标签页的内存，CPU等使用情况。监控。

是因为GameDraw和GameUpdate所用的时间非常长吗？

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

执行Gamedraw功能的时间与在画布中实际绘制元素所花费的时间不同。 Gamedraw调用每个游戏元素的绘制功能。

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

使用requestAnimationFrame的HTML5游戏刷新率

1 个答案: