javascript - Web Worker/Canvas 内存泄漏

Question

fiddle :https://jsfiddle.net/eimmot/065wxa9o/9/

使用 Chrome，启动任务管理器 (Shift+ESC)，点击 worker invert 按钮几次，每次增加 ~10 MB。每当我收到工作人员发回的消息时，内存都会增加，这不是来自修改或访问 Canvas ，而是工作人员将消息发送回主线程时发生的。消息越大，情况就越糟。

将 ImageData 缓冲区添加到 postMessage 上的可选 transferables 列表没有任何区别，结果相同，我想知道是否有其他方法可以解决这个问题。

  imageData = ctx.getImageData(0, 0, 800, 600);
  worker.postMessage(imageData, [imageData.data.buffer]);

主线程和/或工作线程是否正在转移所有权仍然无关紧要。我可以在控制台中看到 imageData 对象实际上转移了所有权，但内存仍然增加!我已经尝试使用 chrome 开发工具进行内存分析，但看不到增加的地方。

在开发工具中强制 GC 会清除内存。有时 GC 会自动运行，有时不会，当它自动运行时，它只会释放大约 10% 的已分配内容。

我昨晚读了很多页，但他们都说了同样的话，我觉得我忽略了一些简单的事情。

可转移对象:https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers#Passing_data_by_transferring_ownership_(transferable_objects)

更新

Chrome 版本 48.0.2564.116 beta-m(64 位)

fiddle :https://jsfiddle.net/eimmot/065wxa9o/13/

添加了一个循环选项，似乎释放内存的唯一方法是终止线程，但我想避免每次都创建新线程并只保持一个打开，因为每次创建新线程时都有明显的延迟时间

Answer 1

我在 Chrome 中找到了适合我的解决方案。我对你的 fiddle 的循环版本做了两个主要修改:

1. 从worker返回时将imageData.data.buffer添加到传输列表
2. 传递类型化数组 imageData.data，而不是整个 imageData 对象

这是修改后的 fiddle :https://jsfiddle.net/065wxa9o/14/

请注意，只是将缓冲区添加到 worker 的传输列表中是行不通的 (https://jsfiddle.net/065wxa9o/15/)，我必须只传输类型化的数组。

Chrome 版本 52.0.2743.116(64 位)