流媒体性能 - Canvas 与 <img>？

Question

我正在开发一个应用程序，需要通过 webSocket 连接以每秒至少 30 帧的速度持续传输图像。

我遇到了一些性能问题，正在寻求尽我所能的优化。

我想知道使用不断更新的图像（像这样

<img src="someDynamicallyUpdatingBase64Image" />

与将图像绘制到画布上（

canvs.drawImage(someDynamicallyUpdatingImage, 0, 0, 640, 480)

）

之间的性能差异是什么？

为了添加一些上下文，发送到客户端的图像是由位于服务器端的相机拍摄的（想想 IP 相机设置）。我们一次只能轮询相机获取一张单独的图像，但这个过程可以很快完成。问题是客户端必须接收字节缓冲区，将字节编码为 base64 字符串（我们当前使用

<img src=xyz>

方法），并让 dom 重绘图像。这个过程相当漫长，并且造成了相当大的延迟。

Answer 1

通常标签更快、更高效，因为浏览器使用硬件加速等多种方法来使其更快。但是，如果您必须不断重新绘制图像，您实际上应该更喜欢画布，因为它在这方面性能更高，并且提供更好的控制。

我希望这有帮助:)