Question

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

我正在使用window.requestAnimationFrame来为我的游戏提供帧，方法是使用“gameloop”函数调用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);
           };
})();

所以尽管如此，我真的想要一些关于我的代码是如何组织的反馈（它肯定可以使用一些工作），一些关于回调的信息，一些关于如何/何时在疯狂的嵌套回调中创建对象的信息以及你可能有任何其他有用的建议。

谢谢！

Answer 1

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

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

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

Javascript内存管理（requestAnimationFrame回调）

1 个答案: