使用WebAssembly在Canvas上绘制系列图像是否更快？

Question

我想问一下使用WebAssembly / WASM将一系列图像绘制到画布上是否更快，内存效率更高？

我问这个问题是因为我已经测试过在主UI和Web工作者中绘制一系列图像（动画）。对于很少的画布（1-5画布），性能是可以忍受的，但是对于更多的画布（如20-25），场景会有所不同，渲染变得慢动作。

这是主UI中的代码：

const videoDecoder = new Worker("videoDecoder.js");
const canvas = document.querySelector("#canvas");
const offscreen = canvas.transferControlToOffscreen();
videoDecoder.postMessage({ action: 'init', canvas: offscreen }, [offscreen] );

这是我的网络工作者：

onmessage = async function (e) {
    const blob = e.data;
    blob.arrayBuffer().then(arrayBuffer => {
        const uint8Array = new Uint8Array(arrayBuffer);
        for(;;;) {
           const offsetIdx = ...;
           const endIdx = ...;
           const jpegArray = uint8Array.slice(offsetIdx, endIdx);
           const blob = new Blob([jpegArray], {type: "image/jpeg"});
           drawImage(blob);
        }
    }
}

async function drawImage(blob) {
    const bmp = await createImageBitmap(blob);
    context.drawImage(bmp, 0, 0);
    bmp.close();
}

这很好，它可以将图像从Web Worker渲染到浏览器，但是如上所述，在1-5个画布上它仍然很平滑，但是随着画布的增加，浏览器中的渲染变得非常慢。

所以我想问使用WebAssembly在画布上绘制系列图像是否更快？>？还是与现在使用网络工作者方法相比，理论上不会有性能提升？

我想问一下使用WebAssembly / WASM将一系列图像绘制到画布上是否更快，内存效率更高？我问这个问题是因为我已经测试过绘制一系列图像（动画）...

Answer 1

WebAssembly对于字节数组上的复杂计算而言可能更快，但主要的JavaScript UI线程仍将执行ArrayBuffer至canvas的呈现。只要通过在主UI线程和WebWorker之间使用ArrayBuffer接口传递对象来“重用” Transferable实例，您就应该能够轻松地高效地更新画布。

Answer 2

所以我想问一下，使用WebAssembly在画布上绘制系列图像是否更快？