Web Worker中Offscreen Canvas未更新：原因分析与Chrome兼容方案

背景 #

我使用OpenGlobus地图库渲染3D行星，该库支持通过自定义函数生成Canvas瓦片作为地图图层。为保障性能，我将瓦片生成逻辑异步化，交由Web Worker处理：

• 主线程的瓦片生成函数创建Canvas，调用transferControlToOffscreen()获取Offscreen Canvas；
• 由Worker Manager（WM）将Offscreen Canvas及参数分发至Web Worker；
• Worker完成绘制后，主线程将Canvas应用到globe。

瓦片生成函数代码如下：

export default function BaseLayer(WM) {
  return new layer.CanvasTiles(`cnv`, {
    isBaseLayer: true,
    drawTile: function (material, applyCanvas) {
      const { tileZoom, tileX, tileY } = material.segment;
      const extent = material.segment.getExtentLonLat();
      const res = 700;

      const cnv = document.createElement("canvas");
      cnv.width = res;
      cnv.height = res;

      const offscreen = cnv.transferControlToOffscreen();

      WM.makeBaseTile({
        extent,
        tileX,
        tileY,
        tileZoom,
        res,
        offscreen,
      }).then(_ => applyCanvas(cnv));
    },
  });
}

Web Worker在页面加载时创建并复用，缓存常用数据，绘制逻辑简化后如下：

self.onmessage = async (e) => {
  const { id, extent, tileX, tileY, tileZoom, res, offscreen } = e.data;

  const cnv = offscreen
  const ctx = cnv.getContext("2d");

  // 绘制 fallback 背景色
  ctx.fillStyle = g.biomeColors[13]; //"#85a478";
  ctx.fillRect(0, 0, res, res);

  // 从在线资源获取数据用于绘制
  let [biomeRes, waterRes, hillshade] = await Promise.all([...axios 请求]);

  // 在绘制水域前，先绘制生物群系颜色（背景）
  biomeRes.data.forEach((BIOME) => {
    BIOME.forEach((b) => {
      // 自定义函数，在画布上绘制几何图形
      drawShape(ctx, b, color, "#000000", e.data, false, 0, false);
    });
  });

  // 如果waterRes是空数组，说明该瓦片无水域
  if (waterRes.length) {
    // jiggle是自定义函数，给几何图形添加噪声
    const water = jiggle(waterRes, extent, tileZoom, 3, 2);

    water.forEach((p) =>
      drawShape(ctx, p, "#5b99a6", "#2d4d54", e.data, false, g.outline)
    );
  }

  // 开关瓦片边框
  if (true) {
    ctx.beginPath();
    ctx.rect(0, 0, cnv.width, cnv.height);
    ctx.lineWidth = 3;
    ctx.strokeStyle = "black";
    ctx.stroke();
    ctx.closePath();

    ctx.font = "50px serif";
    ctx.fillStyle = "black";
    ctx.fillText(`${tileZoom}`, 10, 60);
  }

  // 绘制晕渲图，使用multiply混合模式避免白色背景
  // 缩放级别到15时透明度渐变为0，从10开始衰减
  const img = await createImageBitmap(await hillshade.blob());
  ctx.globalCompositeOperation = "multiply";
  ctx.globalAlpha = Math.max(0, 1 - (tileZoom - 10) / 5);
  ctx.drawImage(img, 0, 0, res, res);
  ctx.globalCompositeOperation = "source-over";
  ctx.globalAlpha = 1.0;

  // ctx.commit();
  postMessage({ origin: JSON.stringify([id, tileX, tileY]) });
}

问题 #

按上述实现后，部分瓦片无法加载（复杂瓦片问题更显著），Chrome和Firefox均存在该问题，且已排除已知已修复的Chrome Bug。

临时修复 #

在Worker绘制完成后调用OffscreenCanvasRenderingContext2D的commit()方法可解决问题，但该方法仅支持Safari和Firefox，Chrome/Chromium系浏览器无此API。

技术求助 #

1. 未调用commit()时瓦片未更新的原因是什么？
2. Chrome/Chromium系浏览器下的替代解决方案有哪些？

问题分析与解答 #

1. 未调用commit()时瓦片未更新的原因 #

Offscreen Canvas在Worker中绘制时，浏览器渲染管线默认不会自动同步绘制结果到主线程关联的DOM Canvas。尤其是绘制逻辑包含**异步操作（如Promise.all请求数据、createImageBitmap）**时，Worker的绘制任务分阶段完成，浏览器无法准确捕捉绘制完成时机，导致主线程Canvas无法感知Offscreen Canvas的像素更新。

复杂瓦片绘制步骤更多、异步等待时间更长，同步延迟问题会被放大——主线程可能在Worker未完成所有绘制时就调用applyCanvas(cnv)，或浏览器内部缓存未触发像素刷新，最终表现为瓦片空白或未加载。

commit()的本质是主动触发Offscreen Canvas到主线程Canvas的像素同步，强制浏览器将Worker绘制内容刷新到关联DOM元素，这也是它能解决问题的核心原因。

2. Chrome/Chromium系浏览器的替代解决方案 #

方案一：手动触发主线程Canvas重绘

在Worker发送postMessage后，主线程收到消息时对关联Canvas执行一次无意义的像素操作，强制浏览器刷新缓存：

// 主线程修改WM.makeBaseTile的回调
WM.makeBaseTile({
  extent,
  tileX,
  tileY,
  tileZoom,
  res,
  offscreen,
}).then(() => {
  // 强制Chrome刷新Canvas
  const tempWidth = cnv.width;
  cnv.width = tempWidth;
  applyCanvas(cnv);
});

方案二：用requestAnimationFrame延迟调用applyCanvas

利用浏览器渲染帧周期，将applyCanvas延迟到下一次重绘时执行，确保Worker绘制操作已完成：

WM.makeBaseTile({
  extent,
  tileX,
  tileY,
  tileZoom,
  res,
  offscreen,
}).then(() => {
  requestAnimationFrame(() => {
    applyCanvas(cnv);
  });
});

方案三：Worker中用transferToImageBitmap传递绘制结果

放弃直接控制Offscreen Canvas，Worker完成绘制后将结果转为ImageBitmap传递回主线程，主线程再绘制到DOM Canvas：

// Worker端修改
self.onmessage = async (e) => {
  // ... 原有绘制逻辑 ...

  // 生成ImageBitmap并传递
  const bitmap = cnv.transferToImageBitmap();
  postMessage({ 
    origin: JSON.stringify([id, tileX, tileY]),
    bitmap 
  }, [bitmap]); // 转移所有权避免拷贝
};

// 主线端修改WM.makeBaseTile逻辑
WM.makeBaseTile = (params) => {
  return new Promise((resolve) => {
    const handleMsg = (msg) => {
      if (msg.data.origin === JSON.stringify([params.id, params.tileX, params.tileY])) {
        worker.removeEventListener('message', handleMsg);
        // 创建新Canvas绘制ImageBitmap
        const cnv = document.createElement("canvas");
        cnv.width = params.res;
        cnv.height = params.res;
        const ctx = cnv.getContext('2d');
        ctx.drawImage(msg.data.bitmap, 0, 0);
        msg.data.bitmap.close(); // 释放资源
        resolve(cnv);
      }
    };
    worker.addEventListener('message', handleMsg);
    worker.postMessage(params, [params.offscreen]);
  });
};

// drawTile中调用
WM.makeBaseTile({
  extent,
  tileX,
  tileY,
  tileZoom,
  res,
  offscreen,
}).then(cnv => applyCanvas(cnv));

该方案虽增加一次图像拷贝，但能确保绘制结果100%同步，适合复杂瓦片场景。

方案四：Worker中调用ctx.flush()强制完成绘制

Chrome支持ctx.flush()，调用后会阻塞Worker直到所有待处理的绘制命令完成，确保发送消息时像素数据已就绪：

// Worker绘制完成后添加
ctx.flush();
postMessage({ origin: JSON.stringify([id, tileX, tileY]) });

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