如何借助 OffscreenCanvas 配合 transferControlToOffscreen 实现真正的主线程零负担绘图

实现主线程零负担绘图的关键是通过transferControlToOffscreen移交控制权，配合transfer list传递OffscreenCanvas和ImageBitmap，禁用所有同步回读与主线程依赖，确保绘制自动上屏。

要实现主线程零负担绘图，关键不是“把画布扔进 Worker”，而是确保主线程从始至终不参与任何像素计算、不触发同步回读、不持有渲染控制权。OffscreenCanvas 本身不自动带来性能提升，transferControlToOffscreen 才是那个真正移交控制权的开关——用错方式，主线程照样卡顿。

必须由主线程 canvas 转移，不能直接 new

OffscreenCanvas 构造函数（new OffscreenCanvas(w, h)）在 Worker 中会报 Illegal constructor。普通 Worker 没有 DOM，无法构造；而即使在主线程中用构造函数创建，它也和页面上的 <canvas> 无绑定，无法自动显示结果。

唯一合法路径是：

• 先在 HTML 中声明一个真实 <canvas id="render-canvas"></canvas>
• 主线程调用 canvas.transferControlToOffscreen()，得到一个与该 DOM 元素强绑定的 OffscreenCanvas 实例
• 必须通过 postMessage(data, [offscreen]) 的 transfer list 移交所有权——少了方括号里的 transfer，就是深拷贝，Worker 拿到的是无效副本

移交后，主线程对原 canvas 调用 getContext 会直接抛错，这是设计使然，也是零负担的前提：它已彻底“失权”。

Worker 中避免所有主线程依赖项

很多项目看似用了 OffscreenCanvas，但帧率仍掉，问题常出在 Worker 内部偷偷依赖主线程资源：

• 图像绘制必须用 ImageBitmap：传 HTMLImageElement 或 HTMLVideoElement 进 drawImage，浏览器会强制同步回读像素，主线程瞬间冻结。正确做法是主线程提前调用 createImageBitmap(img)，再 postMessage(..., [bitmap]) 零拷贝传入
• WebGL 上下文需按浏览器确认支持：Chrome/Edge 支持 WebGL1/2；Firefox 当前仅支持 WebGL2（需开启 dom.workers.offscreen-canvas.enabled）；Safari 完全不支持 OffscreenCanvas + WebGL 组合。务必在 Worker 中显式检查 ctx = offscreen.getContext('webgl2') 是否为非 null
• 没有 requestAnimationFrame：Worker 里不能用 rAF，要用 setInterval 或由主线程定时 postMessage 发送节拍信号（推荐后者，更精准可控）

绘制结果自动上屏，无需手动同步

只要 OffscreenCanvas 是通过 transferControlToOffscreen() 创建并保持绑定，Worker 中对它的任何绘制（2D 或 WebGL）都会实时反映在对应 DOM <canvas> 上——这是底层共享 GPU 纹理或帧缓冲区的结果，不是靠轮询或复制。

不需要：

• 在 Worker 里调用 transferToImageBitmap() 再传回主线程 drawImage
• 主线程监听消息后手动 ctx.drawImage(offscreen)
• 任何额外的 canvas-to-canvas 复制操作

这些操作不仅多余，还会引入内存拷贝或同步开销，直接破坏零负担目标。

验证是否真零负担：三看一测

上线前快速验证：

• 看主线程任务管理器：打开 Chrome DevTools → Performance 面板 → 录制动画过程，确认主线程的 JS/Rendering 栏几乎空白，只有少量事件处理
• 看 Worker 控制台：Worker 中打印 offscreen.getContext('2d') !== null 和 offscreen.width > 0，确保上下文可用且尺寸正常
• 看图像加载链路：检查所有 drawImage 调用传入的是否全是 ImageBitmap，绝无 img 或 video 元素
• 测长时运行内存：连续运行 5 分钟粒子动画，观察主线程内存是否平稳，Worker 内存是否无持续增长（若有，大概率是未释放 ImageBitmap 或缓存了不该缓存的数据）