Javascript内存管理(requestAnimationFrame回调）

Javascript memory management (requestAnimationFrame callback)

本文关键字：回调 requestAnimationFrame 内存 管理 Javascript      更新时间：2023-09-26

我试图公然剽窃小行星，但遇到了严重的内存管理问题。

我使用window.requestAnimationFrame为我的游戏提供帧，方法是让一个"gamelop"函数调用requestAnimationFrame，并将其本身作为参数。然而，我一定做错了什么，因为我的游戏内存使用量很大，这导致了频繁的垃圾收集和糟糕的性能（以及与之相关的典型锯齿状内存使用模式）。我很确定这个问题的原因是这个函数和回调的循环创建了许多函数对象——可能是一些无害的语句，导致创建了一个函数而不是重用。。。可能是gameloop函数。。。

我从这篇帖子中得到了这个想法：https://www.scirra.com/blog/76/how-to-write-low-garbage-real-time-javascript

下面是一个jsfiddle，上面有我的代码：http://jsfiddle.net/LEqUr/（将窗口对准太空，使新的小行星出现）。我知道我的一些东西是驼色的，有些是用下划线做的——对不起。

这是（我认为）代码中最相关的部分：

var gameLoop = function () {
    getSetStageSize(1, 1);
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    updateGameState();
    window.requestAnimFrame(gameLoop);
}
window.requestAnimFrame = (function () {
    return window.requestAnimationFrame || 
       window.webkitRequestAnimationFrame || 
       window.mozRequestAnimationFrame || 
       function (callback) {
               window.setTimeout(callback, 1000 / 60);
           };
})();

综上所述，我真的很想得到一些关于我的代码是如何组织的反馈（它肯定需要一些工作），一些关于回调的信息，一些关于如何/何时在疯狂的嵌套回调中创建对象的信息，以及任何其他有用的建议。

谢谢！

我对动画的特定部分不太了解，但你可以稍微简化最后一部分。您不需要IIFE，因为您没有声明任何局部变量。

window.requestAnimFrame = (
    window.requestAnimationFrame || 
    window.webkitRequestAnimationFrame || 
    window.mozRequestAnimationFrame || 
    function (callback) {
        window.setTimeout(callback, 1000 / 60);
    }
);

除此之外，您可能还需要考虑在幕后使用setInterval而不是setTimeout进行编码。当您使用setTimeout时，每帧的实际时间是从超时开始的（100/60）加上代码处理该帧所需的时间。另一方面，setInterval更了解幕后的真实时钟，并将调整帧之间的超时以补偿处理时间。

相关文章：