使用<img/>和<canvas>绘制图像有什么性能区别？

背景

手机群控功能，需要实时展示手机内容 后台用ws传一个blob格式的数据，前端解析出blob链接（内存）渲染出图片

const blob = new Blob([message.data], { type: 'image/jpeg' })
const blobUrl = window.URL.createObjectURL(blob))
console.log(blobUrl) // blob:http://localhost:8086/f8d0cb57-3b93-4272-a293-d96be7bb442e

实现方案

方案1. 直接img标签： <img :src='blobUrl' /> (blobUrl是从上面获取的)

方案2. canvas: drawImage

this.canvas = document.getElementById('canvas')
// 用canvas绘制视频流,效率比直接img加载要高
this.canvas2D = this.canvas.getContext('2d')
this.img = new Image()
const width = 238
const height = 423
this.img.onload = () => {
  this.canvas.width = width
  this.canvas.height = height
  this.canvas2D.drawImage(this.img, 0, 0, width, height)
}
this.canvas.img = this.img

很明显直接用img标签简单方便，但canvas是否性能更好？ 最终如何选择？

先给结论：此场景用 方案1

使用canvas绘制图片的场景：

<canvas>用于要使用JavaScript动态生成/处理的图形。通常，不会使用画布（canvas）来显示单个静态图像。

• 比如，当我们需要在一张画布上展示多个img时，例如，如果您有“man”，“block”和“ monster”的图像，并且每秒将它们渲染到画布上30次，并根据例如关键事件更新它们的相对位置，那么您基本上已经创建了一个游戏。此时适用canvas绘制图片

如果仅显示单个静态图像，则与仅使用<img>标签没有什么不同