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

Question

我想问一下使用 WebAssembly/WASM 将一系列图像绘制到 Canvas 中是否更快、更节省内存？

我问这个问题是因为我已经测试过在主 UI 和网络 worker 中绘制一系列图像(动画)。对于少数 Canvas (1-5 幅 Canvas )，性能可以忍受，但是对于更多 Canvas (如 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] );

这是我的网络 worker :

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 个 Canvas 上它仍然是平滑的，但是随着更多 Canvas ，浏览器中的渲染变得非常慢。

所以想问使用 WebAssembly 在 Canvas 上绘制系列图像是否更快 ?或者与现在使用 web worker 方法相比，理论上不会有性能提升？

Answer 1

WebAssembly 对于字节数组上的复杂计算可能更快，但主要的 JavaScript UI 线程仍将执行 ArrayBuffer 的渲染。至canvas .只要你“重用”ArrayBuffer通过使用 Transferable 传递对象的实例主 UI 线程和 WebWorker 之间的接口(interface)，您应该能够轻松地高效地更新 Canvas 。

当渲染更新到多个 canvas对象，请考虑在 requestAnimationFrame() 中对它们进行批处理最小化浏览器中像素重绘的功能。这应该会显着提高浏览器帧速率性能。