HTML5游戏刷新率与requestAnimationFrame
HTML5 Game refresh rate with requestAnimationFrame
我正在使用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
- 谷歌浏览器38.0.2125.101米
我的问题是：
- 为什么随着游戏的继续，rAF的调用频率越来越低
- 是因为内存泄漏吗
- 是因为GameDraw和GameUpdate花费的时间很高吗
- 执行Gamedraw函数的时间与在画布中实际绘制元素所花费的时间不同。Gamedraw调用每个游戏元素的draw函数
您会发现许多关于优化画布性能的在线教程。这不是关于使用这个或那个函数，而是关于每两帧之间发生的处理量。
由于您的问题不可能有一个可靠的答案，我将简要介绍每个子问题：
为什么随着游戏的继续，rAF的调用频率越来越低？
就像你在下一个问题中猜到的那样——有东西在泄漏：它可能是任何东西，比如说，在每个循环中添加更多的纹理、事件监听器、DOM对象等。。。简单地说，有太多的JS对象堆积起来，因为它们仍然被引用，所以垃圾回收器无法清除它们。但最重要的是，你需要发现每两帧之间发生了什么变化/增加。
是因为内存泄漏吗？
很可能，但很容易测试。在Chrome中，Shift+Escape打开任务管理器，您可以在其中查看每个打开选项卡的内存、cpu等使用情况。监控它。
是因为GameDraw和GameUpdate花费的时间很高吗？
绝对！这也可能导致内存泄漏。学会进行CPU和画布评测，这将对你有很大帮助。我相信Chrome中的画布评测仍然是一个实验性的功能，所以你需要首先从配置标志中启用它。这两个函数是99%滞后的来源，调查一下那里发生了什么。
执行Gamedraw函数的时间与在画布中实际绘制元素所花费的时间不同。Gamedraw调用每个游戏元素的draw函数。
这并不重要，因为它们都是阻塞代码，这意味着一个只会发生另一个。渲染帧的时间大致是两者的总和。同样，适当的画布渲染优化可以在这里创造奇迹。
相关文章：
- 没有找到相关文章
