Question

我在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（建议使用Google Chrome）。

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

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

Answer 1

它可能没有帮助，可能是你的泄漏，但是你每40毫秒重新加载一个没有改变数据的数组。

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

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

然后，您只是继续以递归方式调用不重新初始化的位置，而只是将该变量与循环一起使用。

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

画布的JavaScript内存问题

1 个答案: