我将画布图像作为位图发送给Web worker,它将其转换为Blob并将其发送回来。将ImageBitmap和返回的ArrayBuffer包含在postMessage transferables中似乎是获得更好性能的最佳实践,但由于Chromium版本M93或M92这样做会导致巨大的内存泄漏。我反复这样做,但等到工人完成。直到ElectronJS 13(Chrome 91)才恢复正常。
简而言之,主进程将画布转换为位图并将其发送给工作进程:
createImageBitmap(canvas).then(bitmap => {
worker.postMessage(bitmap, [bitmap]);
});
worker创建blob并将其发送回:
worker.onmessage = function ({ data }) {
ctx.transferFromImageBitmap(data);
canvas.convertToBlob().then(blob => {
blob.arrayBuffer().then(arrBuf => {
worker.postMessage(arrBuf, [arrBuf]);
});
});
};
这是简化的。一个更完整的例子可以在这个小提琴中找到:https://jsfiddle.net/1eqkfngc/(在fiddle中,内存最终会下降,但在Electron上不会)
删除可转移数组解决了内存问题,但理论上性能较差。
我应该做一些不同的事情,或者这是Chrome中的一个bug?我提交了一份bug报告。
1条答案
按热度按时间aydmsdu91#
这个问题在Chrome版本115.0.5780.0和Electron版本26中得到了修复