Html5 canvas 使用websocket消息的HTML5快速呈现

我有一个简单的sockets服务器（socket.io），通过它发送图像流，当在画布中设置像素数据时（使用putImageData），性能太低。我试着使用以下方法

• 阴影画布画出屏幕，然后回到主画布上
  • 类型1）使用drawImage渲染屏幕外画布
  • 类型2）使用屏幕外画布上的getImageData和主画布上的putImageData
  • 类型3）使用屏幕外的createImageData并通过putImageData进行设置
• 在动画帧更新期间，使用requestAnimFrame更新UI

我还验证了我的服务器和客户端之间的消息延迟，两者都非常快，平均相差<50毫秒（这对我的应用程序来说是可以的）。我还使用base64字符串从服务器发送图像，所有的方法计算都非常快。从我观察到的情况来看，画布需要它自己的甜蜜时间来更新屏幕，即使在操作和设置像素时也是如此。还有一点是，我通过插座接收的图像用于图像的不同区域，而不是相同的区域

我想我缺少了一些基本的设置，或者画布不是为这个设计的

更新： 我也尝试过在Img元素中使用drawImage，然后使用canvas，这只增加了很少的速度。一旦图像流开始流动，UI中的更新速度就会非常慢。

getImageData（）和putImageData（）将图像数据从GPU RAM上传/下载到CPU RAM

相反，使用屏幕外的

或

作为

drawImage（）

图像源，不要执行任何getImageData（）。这样，数据在解码后不会往返于GPU-CPU-GPU

---

如果填充屏幕外画布是一个瓶颈，那么您还可以使用经过特别调整的编解码器（未压缩的PNG）在服务器端创建轻量级图像元素，以便压缩不会延迟到进程。然后将这些PNG数据作为二进制websocket帧（无b64）进行流式处理。

如果您使用的是正统的现代web浏览器，您可以完全跳过画布，只需将接收到的图像数据粘贴到图像标记中，然后使用一个。我真的需要使用画布，因为我正在将单个图像按位进行流式处理，并对图像进行更改。像瘦rdp客户机一样思考。好吧，那CreateImageData->PutImageData呢，那只是CPU到GPU的关系？正如我提到的，网络从来都不是一个真正的问题，因为当服务器发送时，我可以立即获得可用的东西。我在drawImage上更新了我的问题。最终一切都从CPU转到了GPU。当您使用本机图像元素时，浏览器代码应该为您进行优化。然而，我相信，除非你做一个孤立的例子，比如在jsfiddle.net上，我们可以运行你的代码并重复你的测量，否则你不可能帮助你提高效率。你可以简单地将资源作为数据URI等嵌入一个孤立的测试用例中，而不是使用基于网络的资源。