HTML5请求游戏刷新率动画帧

Question

我正在开发一款使用HTML5 Canvas和JavaScript的游戏。最初的FPS是体面的，但随着游戏的持续，FPS下降。最初的fps大约是45 fps，但它降低到5 fps。

以下是我gameloop

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 Firefox 32.0.3
2. 谷歌浏览器38.0.2125.101米

我的问题是：

1. 为什么rAF在游戏继续时调用频率较低？
2. 是否由于内存泄漏？
3. 是否因为GameDraw和GameUpdate花费的时间非常长？
4. 是否执行Gamedraw函数的时间与实际在画布中绘制元素所用的时间不同。 Gamedraw调用绘制每个游戏元素的功能。

Answer 1

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

由于您的问题（S）不能有一个坚实的答案，我将简要讨论每个子问题：

为什么皇家空军称其为比赛继续那么频繁？

就像你在接下来的问题猜到了 - 这是泄漏：它可能是从，说什么，在每个周期中增加更多的纹理，事件监听器，DOM对象，等...只需有太多的JS对象堆积，因为它们仍然被引用，所以垃圾收集器无法摆脱它们。但底线是你需要发现每两帧之间的变化/增加。

是否由于内存泄漏？

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

是否因为GameDraw和GameUpdate所花费的时间非常长？

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

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

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