如何在浏览器 JavaScript 中安全地连续发起有序图像流请求

本文介绍一种基于 promise 链与 requestanimationframe 的稳健图像流加载策略，避免资源耗尽、保证绘制顺序、支持可控并发，并防止因网络延迟或渲染失败导致的请求中断。

在实现浏览器端实时图像流（如监控画面、远程桌面、交互式可视化）时，简单使用 setInterval 触发连续 fetch 会导致严重的资源问题：请求堆积、内存泄漏、ERR_INSUFFICIENT_RESOURCES 错误，甚至因未清理 URL.createObjectURL 而引发内存持续增长。根本原因在于 setInterval 忽略了异步操作的实际耗时——它不等待上一次 fetch 完成、blob 解析、Image 加载、canvas 绘制等环节，强行启动下一轮，最终压垮浏览器。

更优策略是采用 “绘制完成即触发下一轮” 的链式驱动模型，配合节流控制与错误防护，确保：

• ✅ 请求严格按序执行（FIFO），无乱序或跳帧；
• ✅ 每次仅维持少量活跃请求（默认为 1，可扩展至有限并发）；
• ✅ 渲染与主线程同步，避免撕裂（通过 requestAnimationFrame）；
• ✅ 支持优雅启停，防止内存泄漏；
• ✅ 自动清理临时资源（如 URL.createObjectURL）。

以下是一个生产就绪的实现示例（ES2025+ 风格）：

const canvas = document.getElementById('streamCanvas');
const ctx = canvas.getContext('2d');
let isStopped = false;
let currentImageObjectURL = null;

// 可选：添加最大并发数（例如 2~3），实现“少量预取”
const MAX_CONCURRENT = 1;
let pendingFetches = 0;

async function fetchAndRender() {
  if (isStopped || pendingFetches >= MAX_CONCURRENT) return;

  pendingFetches++;

  try {
    const response = await fetch('data.png?' + Date.now()); // 添加时间戳防缓存
    if (!response.ok) throw new Error(`HTTP ${response.status}`);

    const blob = await response.blob();
    const image = new Image();

    image.onload = () => {
      // 确保在下一帧渲染，避免布局抖动与撕裂
      requestAnimationFrame(() => {
        ctx.drawImage(image, 0, 0, canvas.width, canvas.height);

        // 清理上一帧的 object URL（关键！）
        if (currentImageObjectURL) {
          URL.revokeObjectURL(currentImageObjectURL);
        }
        currentImageObjectURL = URL.createObjectURL(blob);

        // 重置计数并递归触发下一轮（仅当未停止）
        pendingFetches--;
        if (!isStopped) {
          fetchAndRender();
        }
      });
    };

    image.onerror = () => {
      console.warn('Image load failed, skipping frame');
      pendingFetches--;
      if (!isStopped) fetchAndRender();
    };

    // 设置 src 后 image 才开始加载
    image.src = URL.createObjectURL(blob);

  } catch (err) {
    console.error('Fetch or decode failed:', err);
    pendingFetches--;
    if (!isStopped) {
      // 出错后延迟重试（避免雪崩），例如 200ms
      setTimeout(() => fetchAndRender(), 200);
    }
  }
}

// 启动流
export function startStream() {
  isStopped = false;
  fetchAndRender();
}

// 停止流（必须调用！）
export function stopStream() {
  isStopped = true;
  if (currentImageObjectURL) {
    URL.revokeObjectURL(currentImageObjectURL);
    currentImageObjectURL = null;
  }
}

关键设计说明：

• 无 setInterval：完全由 image.onload → requestAnimationFrame → draw → fetchAndRender() 形成闭环，节奏由真实渲染延迟决定，天然适配不同设备性能；
• 资源强管控：每次只保留一个 objectURL，并在新帧渲染前主动 revoke 上一帧资源；
• 错误韧性：onerror 和 catch 双重捕获，失败后自动重试（带退避），避免单点故障中断整条流水线；
• 可扩展并发：通过 pendingFetches 计数器与 MAX_CONCURRENT 配置，轻松升级为“预取 N 帧”模式（需配合队列管理帧序号以确保 FIFO）；
• 防缓存技巧：URL 中加入 ?${Date.now()} 或 ?t=${performance.now()}，确保服务端返回最新图像（若服务端支持 ETag/Cache-Control 更佳）。

最后提醒：若服务端支持 Server-Sent Events（SSE）或 WebSocket，对图像流而言通常比轮询 fetch 更高效节能；但本方案在兼容性、调试便利性和渐进增强方面仍具显著优势，是通用前端图像流场景的可靠基石。