從 RGB 像素數組在 JavaScript 中將圖像繪制到屏幕的最快方法是什么？

Question

我正在開發一個圖形前端，該前端呈現服務器端並通過將壓縮圖像發送到客戶端（想想 VNC）將屏幕更新推送到瀏覽器。 我認為編碼 PNG 的開銷太高，所以目前我正在通過 websocket（啟用壓縮）發送 8 位 RGB 像素值的原始 blob。 這實際上非常快，我看到了很大的壓縮增益（例如 75K -> 2.7k）。

然而，在客戶端，我必須獲取原始像素，然后將它們繪制到畫布上。 這是我目前最好的代碼性能明智的：

// 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 微秒。 可以稱之為足夠好。