javascript - 在 JavaScript 中从 RGB 像素数组中将图像绘制到屏幕上的最快方法是什么？

Question

我正在开发一个图形前端，它通过向客户端发送压缩图像(想想 VNC)来呈现服务器端并将屏幕更新推送到浏览器。我已经决定编码 PNG 的开销太高，所以目前我正在通过 websocket(启用压缩)发送 8 位 RGB 像素值的原始 blob。这实际上非常快，而且我看到了很大的压缩增益(例如 75K -> 2.7k)。

然而，在客户端上，我必须获取原始像素，然后将它们绘制到 Canvas 上。这是我目前最好的代码性能:

// receive message from server
self.ws.onmessage = function (evt) {
    // get image offset
    var dv = new DataView(evt.data);
    var dx = dv.getInt16(0);
    var dy = dv.getInt16(2);
    var ww = dv.getInt16(4);
    var hh = dv.getInt16(6);
    var offset = 8;

    // get context to canvas and create image
    var ctx = self.canvas.getContext("2d");
    var img = ctx.createImageData(ww, hh);

    // unpack image data
    var start = performance.now();
    var dst = 0, src = offset;
    for (var ii=0; ii < ww*hh; ii++) {
        img.data[dst++] = dv.getUint8(src++);
        img.data[dst++] = dv.getUint8(src++);
        img.data[dst++] = dv.getUint8(src++);
        img.data[dst++] = 255;
    }

    // draw image
    ctx.putImageData(img, dx, dy, 0, 0, ww, hh);
    var end = performance.now();

    console.log("draw took " + (end-start) + " milliseconds");

前面提到的 75K 图像(即 1000x500 像素)以这种方式渲染需要大约 53 毫秒，这是一个很长的时间。进行此绘图操作的最快方法是什么？我可以输出 RGBA 像素，而不是让生活更轻松。

编辑:看起来这可能更像是一个 Firefox 问题，Chrome 平均在约 2.5 毫秒内运行相同的解码循环。

Answer 1

切换到完整的 RGBA 输出(由于压缩不会增加太多开销)，并使用此代码直接包装 websocket 缓冲区明显更快:

// receive message from server
self.ws.onmessage = function (evt) {
    // get image offset
    var dv = new DataView(evt.data);
    var dx = dv.getInt16(0);
    var dy = dv.getInt16(2);
    var ww = dv.getInt16(4);
    var hh = dv.getInt16(6);

    // get context to canvas and create image
    var ctx = self.canvas.getContext("2d");

    // draw image data
    var start = performance.now();
    ctx.putImageData(
        new ImageData(new Uint8ClampedArray(evt.data, 8), ww, hh),
        dx, dy,
        0,  0,
        ww, hh
    );
    var end = performance.now();

    console.log("draw took " + (end-start) + " milliseconds");
}

现在，大图像尺寸在 Firefox 中渲染大约需要 1 毫秒，在 Chrome 中渲染需要 350 微秒。会说这已经足够好了。