如何优化canvas批量绘制大量图片的性能 解决渲染延迟问题

问题核心原因 #

你当前的基准测试逻辑存在根本性错误：Image对象的加载是异步行为，你在赋值src后立刻执行drawImage批量绘制，此时SVG资源还未完成加载和解码，计时统计的只是往渲染队列提交绘制指令的耗时，而非实际资源加载+画面渲染的总耗时，这就是你测出来只有几毫秒但实际画面渲染慢的核心原因。

可行优化方案 #

• 提前预加载并缓存资源
  不要在每次绘制逻辑中初始化图片，全局预加载SVG，等onload回调触发后再执行绘制逻辑，避免重复解码资源。如果是固定尺寸的SVG，建议提前光栅化为位图缓存：把SVG先绘制到一个不可见的离屏Canvas上，后续所有drawImage调用都用这个离屏Canvas作为源，省去每次绘制都解析矢量SVG的开销。
  示例代码：

  // 全局预加载缓存
  let cachedImgSource;
  const preload = async () => {
    const img = new Image();
    img.src = "svg.svg";
    await new Promise(resolve => img.onload = resolve);
    // 光栅化缓存
    const cacheCanvas = document.createElement('canvas');
    cacheCanvas.width = img.width;
    cacheCanvas.height = img.height;
    cacheCanvas.getContext('2d').drawImage(img, 0, 0);
    cachedImgSource = cacheCanvas;
  }
  // 预加载完成后再执行所有绘制逻辑
  preload().then(startYourDrawTask)
  

• 减少drawImage调用次数
  每次drawImage都存在上下文切换开销，2000次调用的累计开销很高。你可以先在离屏Canvas上批量绘制完所有内容，再一次性把离屏Canvas绘制到多个可见Canvas上，重复绘制的场景下直接复用已经画好的离屏Canvas即可，不需要重复执行2000次绘制逻辑。

• 关闭Canvas上下文不必要的特性
  绘制前固定上下文属性，减少每次绘制的属性检查开销：

  context.imageSmoothingEnabled = false; // 不需要图片平滑时关闭
  context.globalAlpha = 1; // 不需要透明度时固定为1
  context.globalCompositeOperation = 'source-over'; // 不需要混合模式时固定默认值
  

• 正确使用OffscreenCanvas
  之前优化失败大概率是没处理好资源加载和线程通信，正确用法是把绘制逻辑放到Worker线程，用ImageBitmap作为绘制源，绘制过程完全不阻塞主线程：
  主线程代码：

  const canvas = document.querySelector('#canvas');
  const offscreen = canvas.transferControlToOffscreen();
  const worker = new Worker('draw.worker.js');
  worker.postMessage({canvas: offscreen, coordinates: coordinates}, [offscreen]);
  

  Worker线程代码（draw.worker.js）：

  self.onmessage = async (e) => {
    const {canvas, coordinates} = e.data;
    const ctx = canvas.getContext('2d');
    // 加载ImageBitmap比普通Image性能更高
    const res = await fetch('svg.svg');
    const blob = await res.blob();
    const imgBitmap = await createImageBitmap(blob);
    // 执行批量绘制
    coordinates.forEach(([x,y]) => ctx.drawImage(imgBitmap, x, y));
  }
  

• 修复HTML执行顺序问题
  你当前把script标签放在head中，执行时body内的canvas还未渲染，会导致querySelector拿不到元素，建议把script标签移到body标签末尾，或者把所有JS逻辑包裹在DOMContentLoaded事件回调中。

内容的提问来源于stack exchange，提问作者Antonio Gamiz Delgado