如何通过websocket onmessageevent以更快的速度绘制图像画布

Question

我已经编写了一个websocket实现，用于从服务器到javascript客户端的图像传输。

在事件this.webSocket.onmessage的客户端，我们收到的png图像为base64，并编写如下内容进行显示。

if (bIsPngFormat) { 
  // Draw the image onto canvas using image.onload event
  var myImage = new Image();
  myImage.onload = () => {
    this.ctx.drawImage(myImage, 0, 0);
  }
  myImage.src = "data:image/png;base64," + renderableImage
}

但是即使事件以90帧/秒的速度触发，显示也不会刷新

只想知道为什么画布很快就不能用新的传入图像刷新。

在带openGL上下文的画布上使用或直接发送RGBA缓冲区（而不是base64 png）并使用以下代码进行渲染时，效果会更好

代码：

// Apply the uint8array buffer received from websocket onmessage
var iData = new ImageData(new Uint8ClampedArray(renderableImage), width, height);
this.ctx.putImageData(iData, 0, 0);"    

谢谢。