Javascript內存管理（requestAnimationFrame回調）

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更了解幕后的真實時鍾，並將調整幀之間的超時以補償處理時間。