OffscreenCanvas 必须由主线程通过 transferControlToOffscreen() 创建并移交，Worker 中不可直接 new；图表渲染需分离坐标计算（Worker）与像素绘制（OffscreenCanvas），且图像输入仅限 ImageBitmap 或 TypedArray，禁用 DOM 元素。
OffscreenCanvas 不能在 Worker 中直接 new，必须由主线程移交；图表坐标计算和像素绘制可彻底分离——前者进 Worker 做数值处理，后者用 OffscreenCanvas 在 Worker 渲染，但前提是图像输入全为 ImageBitmap 或 TypedArray，不能碰任何 DOM 元素。
Worker 里为什么 new OffscreenCanvas(1000, 600) 会报错
这不是浏览器 bug，而是规范强制限制：普通 Worker 没有 DOM 环境，transferControlToOffscreen() 只能在主线程的 <canvas> 上调用。你写的 new OffscreenCanvas(1000, 600) 在 Chrome/Firefox 里直接抛 TypeError: Illegal constructor，Safari 甚至不解析这行代码。
唯一合法路径是：
- 主线程创建真实
<canvas id="chart-canvas"></canvas> - 调用
canvas.transferControlToOffscreen()得到 OffscreenCanvas 实例 -
postMessage({ canvas: offscreen }, [offscreen])—— 必须把实例放进 transfer list，否则 Worker 收到的是空对象，getContext('2d')静默返回null
drawImage 传 HTMLImageElement 就卡死主线程
很多人想让 Worker 加载一张背景图再叠数据线，结果写 ctx.drawImage(imgElem, 0, 0)，发现主线程突然卡住、滚动延迟、动画掉帧。这是因为 OffscreenCanvas 在 Worker 中调用 drawImage 时，如果参数是主线程的 HTMLImageElement 或 HTMLCanvasElement，浏览器会强制同步回读像素，等同于把 Worker 的绘图任务又拖回主线程执行。
正确做法只有一条：
- 主线程用
createImageBitmap(img)预解码（支持<img>、Blob、ArrayBuffer） -
postMessage({ bitmap }, [bitmap])把ImageBitmap转移过去 - Worker 中
ctx.drawImage(bitmap, 0, 0)—— 零拷贝、无同步、GPU 直接访问
漏掉 ImageBitmap 这层，OffscreenCanvas 就只是个“后台假象”。
超大规模图表渲染必须拆成两阶段：坐标算完再画
真正卡顿的从来不是 fillRect 或 strokeLine，而是对百万级点做 x = (data[i].time - minX) * scaleX + offsetX 这类循环计算。这些纯 CPU 工作必须剥离出主线程，且不能靠 setTimeout 割裂——要真并行。
推荐结构：
- 主线程只管交互：缩放、拖拽、鼠标位置，算出当前视口参数（
minX,maxX,scaleY,offsetY） - 把原始数据数组 + 视口参数打包发给 Worker（用
Transferable传Float32Array.buffer） - Worker 内完成：数据裁剪 → 坐标映射 → 折线点聚合（如每 5 像素取一个极值）→ 输出精简后的
Float32Array坐标序列 - 主线程收到后，不立刻画，而是再发一次消息给 Worker：“用这些点，画到 offscreenCanvas 上”，Worker 才调用
ctx.beginPath()+stroke()
这样，CPU 密集型计算和 GPU 绘图完全错开，主线程永远只处理用户输入和消息调度。
WebGL 渲染图表时，readPixels 是性能黑洞
有些团队想用 WebGL 在 Worker 里画散点图加速，结果一帧调一次 gl.readPixels()，帧率从 60 掉到 8。这是硬伤：readPixels 强制 GPU 同步，所有后续命令排队等待像素就绪，彻底废掉并行性。
替代方案只有两个：
- 用
offscreenCanvas.transferToImageBitmap()截帧（适合低频更新，如海报生成） - 让 Worker 持续渲染到同一个 OffscreenCanvas，主线程用
requestAnimationFrame不停调用visibleCtx.drawImage(offscreenCanvas, 0, 0)—— 这里offscreenCanvas是共享引用，不传输、不拷贝、不阻塞
注意：transferToImageBitmap() 是异步操作，频繁调用会让 Worker 帧率骤降；而共享引用方式要求主线程 Canvas 必须已挂载 DOM 且尺寸固定，否则会触发重排重绘。
最易被忽略的一点：OffscreenCanvas 的 width/height 设定必须在移交前完成，且不可动态改。Worker 里试图执行 offscreen.width = 1200 无效，也不会报错——它只会默默忽略，导致后续 getContext('2d') 返回 null 或绘图区域错位。尺寸必须在主线程设置好再移交。
