Проблема с памятью JavaScript в Canvas

Question

Я использую getImageData / putImageData на холсте HTML5, чтобы иметь возможность манипулировать изображением. Моя проблема в том, что браузер никогда не освобождает память 1004 *. Пока я не закрою вкладку (проверено в Chrome и Opera).

Вычеркнуто это из функции:

 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);
}

Полный пример можно найти здесь (рекомендуется Google Chrome).

Проблема не в setTimeout, потому что я пробовал цикл с тем же эффектом.

Я понял, что удаление циклических ссылок часто является ключом, но действительно ли он у меня есть? Как я могу изменить этот код, чтобы JavaScript GC получил шанс выполнить свою работу?

Answer 1

Это не поможет, возможно, с вашей утечкой, но вы перезагружаете массив каждые 40 мсек с данными, которые не изменились.

Возможно, вы захотите использовать замыкание вокруг инициализации.

По сути, просто создайте переменную, которая имеет функцию с циклом, с информацией о пикселях, заключенной в нее.

Затем вы просто продолжаете рекурсивно вызывать, где вы не реинициализируете, а просто используете переменную с циклом.

Таким образом, вы повторно используете ту же информацию о пикселях, она сохраняет свое состояние, что должно быть хорошо, если вы не редактируете холст в другом месте.