javascript - Canvas native 方法占用大量 RAM

Question

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

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

您可以通过更改为不同的提交来查看 RAM 消耗的影响:第一个是最差的，倒数第二个是最好的。通过浏览不同的提交，您可以看到使用内存似乎“可解释”的唯一版本是 this commit ，我在其中删除了对 Canvas native 方法的所有引用。

有趣的是，使用的内存没有被内存分析器捕获:这就像 chrome 使用的一些内存不依赖于我的 javascript。尝试运行 this commit并使用本地任务管理器(例如 htop)和谷歌调试工具、js heap voice 查看内存量。差别很大。

所有这些测试都是在 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。那里有你的内存 pig 。随着像素数量的增加，您创建了相同数量的阵列。我不确定 square 在哪里被使用。它只是接受值(value)观。

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

至于 GC 何时启动，这取决于浏览器。您无法真正判断它何时启动，但您肯定可以通过关注如何创建诸如对象之类的东西来避免它。