Question

我正在编写一个可以基于单个像素在HTML5 Canvas上执行操作的软件。基本上我获取所有像素，更新RGB的值并使用本机方法getImageData，createImageData和putImageData将其写回。

在进行一些测试时，我发现我的软件使用了大量的内存，远远超过了javascript所使用的数量。所以我创建了this github repo来逐个删除每个可能导致内存消耗的元素，并且我发现它是由这些本机方法引起的。我知道这个软件可以改进很多，但这并没有解释这个效果。以它为例。

通过更改为不同的提交，您可以看到RAM消耗的影响：第一个是最差的，第二个是最好的。通过导航不同的提交，您可以看到所使用的内存看起来唯一的版本＆＃34;可解释的＆＃34;是this commit，我删除了对canvas本机方法的所有引用。

有趣的是内存分析器没有捕获所使用的内存：它就像Chrome使用的内存不依赖于我的javascript。尝试运行this commit并查看本地任务管理器（例如htop）和google调试工具js堆语音的内存量。这有很大的不同。

所有这些测试都在Chrome 47上完成; Firefox似乎没有这个问题。

这是正常还是我做错了什么？为什么这些方法的每次调用都不会释放内存但会继续累积，从而产生内存泄漏？

Answer 1

这个的首选答案是拉出一个分析器并检查。

现在关注你的代码，我看到了：

pixels.forEach(function(pixel) {
  var interval = 1, x, y, square=[];
  for (x=-interval; x<interval; x++)
    for (y=-interval; y<interval; y++) {
      var tmp = getPixel(pixel.x + x, pixel.y + y);
      if (tmp) square.push(tmp);
    }
});

对于每个像素，它会创建一个数组square。你的记忆力就在那里。随着像素数量的增加，您可以创建相同数量的数组。我不确定square在哪里使用。它只接受价值观。

此外，你有一个3级循环。我们都知道forEach比常规循环慢。您可能希望更改逻辑以避免这种情况。

至于GC何时启动，这取决于浏览器。你无法确定它什么时候开始，但是你可以通过关注如何创建像物体这样的东西来避免它。

使用大量RAM的Canvas本地方法

1 个答案: