画布的 JavaScript 内存问题答案

【问题标题】：JavaScript memory problem with canvas画布的 JavaScript 内存问题
【发布时间】：2009-11-17 00:38:40
【问题描述】：

我在 HTML5 画布上使用 getImageData/putImageData 来处理图片。我的问题是浏览器似乎从来没有free any memory。直到我关闭标签（在 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);
}

完整的example can be found here（推荐使用谷歌浏览器）。

问题不是setTimeout，因为我尝试了一个具有相同效果的循环。

我开始明白删除循环引用通常是关键，但我真的有吗？如何更改此代码以便JavaScript GC 有机会完成它的工作？

【问题讨论】：

我想知道画布是否保留了像素数组。您可能希望在释放画布之前将其设置为 null。
是的，这很奇怪。尝试在函数末尾将所有变量归零。

标签： javascript memory-leaks

【解决方案1】：

这无济于事，可能与您的泄漏有关，但您每 40 毫秒使用未更改的数据重新加载一个数组。

您可能希望在初始化周围使用闭包。

基本上，只需创建一个具有循环函数的变量，其中包含像素信息。

然后，您只需在不重新初始化的地方继续递归调用，只需将变量与循环一起使用。

这样你可以重复使用相同的像素信息，它保持它的状态，这应该没问题，除非你在其他地方编辑画布。

【讨论】：