캔버스에 자바 스크립트 메모리 문제가 있습니다.

Question

HTML5 캔버스에서 getImageData/putImageData을 사용하여 그림을 조작 할 수 있습니다. 내 문제는 브라우저가 결코 free any memory 인 것처럼 보입니다. 탭을 닫을 때까지 (크롬과 오페라에서 테스트 됨).

함수에서 다음을 이전 :

var ctx = document.getElementById('leif').getContext('2d'); 
var imgd = ctx.getImageData(0,0,width,height); 
var pix = imgd.data; 
var rndpixel = 0; 

하고 문제가 사라졌다!

function infiniteLeif() 
{ 
    for (var i = 0; i<65536; i+=4) { 
    rndpixel=Math.floor(Math.random()*(width*(height-2))+width+4) * 4; 
    pix[rndpixel-wx4] = pix[rndpixel]; pix[rndpixel-wx4+1] = pix[rndpixel+1]; pix[rndpixel-wx4+2] = pix[rndpixel+2]; 
    pix[rndpixel+wx4] = pix[rndpixel]; pix[rndpixel+wx4+1] = pix[rndpixel+1]; pix[rndpixel+wx4+2] = pix[rndpixel+2]; 
    pix[rndpixel-4] = pix[rndpixel]; pix[rndpixel-4+1] = pix[rndpixel+1]; pix[rndpixel-4+2] = pix[rndpixel+2]; 
    pix[rndpixel+4] = pix[rndpixel]; pix[rndpixel+4+1] = pix[rndpixel+1]; pix[rndpixel+4+2] = pix[rndpixel+2]; 
    } 

    ctx.putImageData(imgd,0,0); 
    if (go==1) t=setTimeout(infiniteLeif,40); 
} 

전체 example can be found here (Google 크롬 권장)

같은 효과로 루프를 시도했기 때문에 문제가되는 것은 setTimeout이 아닙니다.

순환 참조 제거가 종종 핵심이지만 실제로 하나의 순환 참조를 사용한다는 것을 알게되었습니다. JavaScript GC이 작업을 수행 할 수 있도록이 코드를 어떻게 변경할 수 있습니까?

Answer 1

아마도 누수와 관련해서는 도움이되지 않지만 변경되지 않은 데이터로 40ms마다 어레이를 다시로드하고 있습니다.

초기화를 할 때 클로저를 사용하는 것이 좋습니다.

기본적으로 루프 내에 함수가 포함 된 변수를 만들고 그 안에 pix 정보가 포함되어 있습니다.

그런 다음 다시 초기화하지 않은 위치에서 재귀 적으로 호출을 계속하고 루프와 함께 변수를 사용하면됩니다.

동일한 pix 정보를 다시 사용하면 다른 곳에서 캔버스를 편집하지 않는 한 상태가 유지됩니다.