我将画布图像作为位图发送给网络工作者,网络工作者将其转换为 blob 并将其发回。在 postMessage transferables 中包含 ImageBitmap 和返回的 ArrayBuffer 似乎是获得更好性能的最佳实践,但由于 Chromium 版本 M93 或 M92 这样做会导致巨大的内存泄漏。我反复这样做,但要等到工人完成。在 ElectronJS 13(Chrome 91)之前一直很好。
简而言之,主进程将画布转换为位图并发送给worker:
createImageBitmap(canvas).then(bitmap => {
worker.postMessage(bitmap, [bitmap]);
});
工作人员创建 blob 并将其发回:
worker.onmessage = function ({ data }) {
ctx.transferFromImageBitmap(data);
canvas.convertToBlob().then(blob => {
blob.arrayBuffer().then(arrBuf => {
worker.postMessage(arrBuf, [arrBuf]);
});
});
};
这是简化的。可以在这个 Fiddle 中找到一个更完整的示例:https://jsfiddle.net/1eqkfngc/(在 fiddle 中,内存最终会下降,在 Electron 上则不会)
删除可转移数组解决了内存问题,但理论上性能较低。
我应该做些不同的事情还是这是 Chrome 中的错误?我已经提交了错误报告。