google-chrome - 使用 Canvas drawImage 方法在谷歌浏览器中增加奇怪的内存

Question

我开发了一个包含 ~160 图像的应用程序。我正在创建 160 个 img 元素并加载它们。加载后，我使用 HTML5 Canvas 元素来显示它们。我正在使用 drawImage 在 Canvas 上显示图像。

我的问题是，只有在谷歌浏览器中，内存总是在增加。在其他浏览器(如 firefox 或 IE11)中，我的应用程序使用 ~260-300 MB，但在 Chrome 中它使用 ~1,4 GB，这太多了。当我调用 drawImage 方法时，内存只会增加。我已经尝试了 Canvas 上下文的 clearRect 方法，我也尝试过重新创建 Canvas (删除 + 追加组合)。

我的问题有什么可能的解决方案吗？这是一个 Chrome 错误吗？我已经用 chrome 的任务管理器对其进行了测试。我已经看到，图像缓存也在增加，但这对我来说不合逻辑，因为我只加载了 1 次图像，而且我只是将它们与 drawImage 方法一起使用。

谢谢你的经验。

Answer 1

我有一个与非常大的图像(3000x2000)的图像循环类似的问题，以在上传前生成预览:

首先我加载一个图像( image.src = url )。

加载图像后，我通过 Canvas drawImage ( canvas.drawImage(image, ...) )

调整其大小

然后我从 Canvas 上下文中获取 da dataURL。

之后，我通过删除引用来丢弃图像和 Canvas 。

这会导致(仅在 Chrome 35 中)持续消耗内存，然后内存耗尽。
我用 image.src = null 解决了使图像无效的问题在删除它之前。

非常奇怪的行为是，如果我使用 DevTools 来分析内存使用情况(我显然怀疑是我的代码产生的内存泄漏)，内存消耗不再发生，并且在我删除图像时总是调用垃圾收集器。