자바 스크립트 메모리 관리 (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); 
    } 
); 

대신의 setTimeout의 배후하여 setInterval을 사용하는 일을 코딩 고려 와트를 할 수도 있습니다. setTimeout을 사용하면 프레임 당 실제 시간은 시간 초과 값에서 (100/60)이며 코드에서 해당 프레임을 처리하는 데 오래 걸립니다. 반면에 setInterval은 장면 뒤의 실제 시계를 더 잘 알고 있으며 처리 시간을 보완하기 위해 프레임 사이의 시간 초과를 조정합니다.