用途:当 WebGPU 渲染或计算循环造成主线程卡顿,或主线程同时运行大量 CPU 工作时,将 WebGPU 移到专用 Web Worker,并渲染到 OffscreenCanvas,保持主线程流畅。若帧工作较轻且主线程响应正常,资料建议保留在主线程,避免额外复杂度。
主要能力与用法:主线程从 DOM canvas 调用 canvas.transferControlToOffscreen(),再 worker.postMessage({ canvas }, [canvas]) 转移;worker 内通过 event.data.canvas 接收,使用 navigator.gpu 请求 adapter 与 device,调用 offscreenCanvas.getContext("webgpu") 配置并渲染。若结果无需显示在 DOM canvas,可直接在 worker 内 new OffscreenCanvas(w, h)。
限制与注意事项:OffscreenCanvas 必须列入 postMessage 传输列表,否则抛 DataCloneError;transferControlToOffscreen 每个 DOM canvas 只能调用一次,且在 getContext 之前,否则抛 InvalidStateError;worker 内不可使用 window、document 或任何 DOM API;尺寸变化需由主线程 ResizeObserver 检测后 postMessage 给 worker;渲染前必须 configure,格式取自 navigator.gpu.getPreferredCanvasFormat();WebGPU 要求安全上下文(HTTPS 或 localhost),worker 同样适用;资料针对 new Worker(...) 的专用 worker,service worker 不支持 WebGPU 渲染循环,其他 worker 类型需查最新文档。详细代码示例与反模式见资料中的 references 文件。