OffscreenCanvas + transferControlToOffscreen 主线程零负担绘图

实现主线程零负担绘图的关键，其实就一句话：通过 transferControlToOffscreen 移交控制权，配合 transfer list 传递 OffscreenCanvas 和 ImageBitmap，同时禁用所有同步回读与主线程依赖，确保绘制自动上屏。但真正落地时，很多细节一不注意就会翻车。

要实现主线程零负担绘图，核心绝对不是"把画布扔进 Worker"就完事了。关键在于：主线程从始至终不能参与任何像素计算、不能触发同步回读、不能持有渲染控制权。OffscreenCanvas 本身并不会自动带来性能提升——transferControlToOffscreen 才是那个真正移交控制权的开关。用错了方式，主线程照样卡成幻灯片。

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

OffscreenCanvas 构造函数（new OffscreenCanvas(w, h)）在 Worker 里会直接报 Illegal constructor。普通 Worker 没有 DOM，根本无法构造；即使你在主线程中用构造函数创建一个，它和页面上的 也没有绑定关系，结果无法自动显示。

唯一合法的路径是这样的：

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

移交之后，主线程再对原 canvas 调用 getContext 会直接抛错。这不是 bug，而是设计如此——它已经彻底"失权"，这也是零负担的前提。

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

不少项目看起来用了 OffscreenCanvas，但帧率依然掉得厉害。问题通常出在 Worker 内部偷偷依赖了主线程资源：

• 图像绘制必须用 ImageBitmap：如果传 HTMLImageElement 或 HTMLVideoElement 进 drawImage，浏览器会强制同步回读像素，主线程瞬间卡死。正确做法是主线程提前调用 createImageBitmap(img)，再 postMessage(..., [bitmap]) 零拷贝传入
• WebGL 上下文需按浏览器确认支持：Chrome/Edge 支持 WebGL1 和 WebGL2；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 上——这是底层共享 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 或缓存了不该缓存的数据）