Websocket传输图像场景下，img标签高效加载优化方案咨询

当前方案的问题分析 #

你的卡顿和跳帧问题主要来自两个核心点：

1. URL.createObjectURL + img.src 的流程存在额外异步开销——浏览器需要为每个Blob创建临时URL、再执行读取解析，当帧率超过30fps时，旧帧的解码任务会排队，导致新帧被延迟覆盖。
2. 没有帧丢弃策略，新帧到来时旧帧还在处理，最终旧帧晚于新帧显示，出现跳帧。

优化方案 #

1. 使用Canvas + createImageBitmap 直接绘制（推荐） #

createImageBitmap 是浏览器原生的高效图像解码API，支持硬件加速，直接处理Blob/ArrayBuffer，跳过URL创建的中间环节，还能主动取消未完成的解码任务，保证只显示最新帧。

代码示例：

// 提前获取Canvas和上下文，避免每次回调重复查询DOM
const canvas = document.getElementById('camera-preview');
const ctx = canvas.getContext('2d');
let pendingDecodeTask = null;

cameraOutputSocket.addEventListener("message", async (event) => {
  // 取消前一次未完成的解码任务，直接丢弃旧帧
  if (pendingDecodeTask) {
    pendingDecodeTask.cancel();
  }

  try {
    // 解码当前帧，createImageBitmap支持Blob、ArrayBuffer等格式
    pendingDecodeTask = createImageBitmap(event.data);
    const imageBitmap = await pendingDecodeTask;

    // 仅在尺寸变化时调整Canvas，避免重复重绘
    if (canvas.width !== imageBitmap.width || canvas.height !== imageBitmap.height) {
      canvas.width = imageBitmap.width;
      canvas.height = imageBitmap.height;
    }

    // 同步绘制到Canvas，完成显示
    ctx.drawImage(imageBitmap, 0, 0);

    // 及时释放解码后的图像内存，避免泄漏
    imageBitmap.close();
  } catch (err) {
    // 忽略取消错误，仅处理真正的解码失败
    if (err.name !== 'CanceledError') {
      console.error('图像解码失败:', err);
    }
  }
});

2. 强制帧丢弃策略 #

如果目标是60fps，必须严格保证只处理最新的帧：

• 每次新帧到来时，立刻取消前一次未完成的解码任务（如代码中的pendingDecodeTask.cancel()），避免旧帧占用解码资源。
• 可以添加时间阈值判断：如果当前帧的处理时间超过16ms（60fps的单帧预算），直接丢弃后续旧帧，优先保证新帧的显示。

3. 图像格式轻量化优化 #

200kb的单帧体积对60fps来说压力较大，建议后端配合调整：

• 使用WebP格式：同样视觉质量下，体积比JPEG小30%左右，解码速度更快。
• 针对监控、灰度图等特定场景，可传输YUV原始数据，前端用Canvas直接合成，跳过JPEG解码的额外开销。

4. 内存泄漏修复 #

原方案中URL.createObjectURL创建的临时URL不会自动释放，需要手动调用URL.revokeObjectURL(imageSrc)，否则内存累积会加重卡顿；而使用createImageBitmap时，调用imageBitmap.close()即可及时释放解码后的图像内存。

方案优势 #

• 跳过了临时URL的创建与读取环节，直接从Blob解码图像，减少中间开销。
• createImageBitmap支持硬件加速，解码效率远高于img元素的异步解码流程。
• 主动丢弃旧帧，保证显示的永远是最新帧，彻底解决跳帧问题。

内容的提问来源于stack exchange，提问作者Skwiggs