实现主线程零负担绘图的关键是通过transfercontroltooffscreen移交控制权，配合transfer list传递offscreencanvas和imagebitmap，禁用所有同步回读与主线程依赖，确保绘制自动上屏。
要实现主线程零负担绘图，关键不是“把画布扔进 Worker”，而是确保主线程从始至终不参与任何像素计算、不触发同步回读、不持有渲染控制权。OffscreenCanvas 本身不自动带来性能提升，transferControlToOffscreen 才是那个真正移交控制权的开关——用错方式，主线程照样卡顿。
必须由主线程 canvas 转移，不能直接 new
OffscreenCanvas 构造函数（new OffscreenCanvas(w, h)）在 Worker 中会报 Illegal constructor。普通 Worker 没有 DOM，无法构造；而即使在主线程中用构造函数创建，它也和页面上的 <canvas></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></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 或缓存了不该缓存的数据）
