OffscreenCanvas 性能测试 - 主线程 vs Worker 渲染速度

OffscreenCanvas 是一个可在 Web Worker 中使用的 Canvas 接口，允许将渲染计算从主线程分离到后台线程。它不会直接显示在页面上，但可以将其渲染结果同步到主线程的 Canvas 元素上，或用于生成 ImageBitmap。这使得复杂的 2D/3D 渲染不会阻塞用户交互。

① 不阻塞主线程：渲染计算完全在 Worker 线程执行，主线程可保持流畅的 UI 响应和用户交互；
② 并行处理：可以利用多核 CPU 进行并行渲染，尤其在复杂场景（游戏、数据可视化）中优势明显；
③ 更好的帧率稳定性：即使主线程负载较高（如大量 DOM 操作、复杂计算），Worker 中的渲染帧率也不受影响。

使用 canvas.transferControlToOffscreen() 方法获取 OffscreenCanvas 实例，然后通过 worker.postMessage(offscreenCanvas, [offscreenCanvas]) 将其转移所有权到 Worker。转移后，主线程不能再操作该 Canvas，所有绘制需在 Worker 中完成。注意：每个 Canvas 只能转移一次。

• Web 游戏：复杂场景渲染不卡顿 UI
• 数据可视化：大量图表/图形实时渲染
• 图像/视频处理：滤镜、变换等计算密集型操作
• PDF 渲染：在 Worker 中渲染页面不阻塞浏览
• 动画密集型页面：保持 60fps 流畅体验

OffscreenCanvas 在 Chrome 69+、Edge 79+、Firefox 105+、Safari 16.4+ 中得到支持。截至 2024 年，全球约 93%+ 的用户浏览器支持此 API。可通过 typeof OffscreenCanvas !== 'undefined' 进行特性检测。

不能。requestAnimationFrame 仅在 Window 上下文（主线程）中可用。在 Worker 中，通常使用 setInterval 或递归 setTimeout 来驱动渲染循环。不过 OffscreenCanvas 本身提供了高效的帧提交机制，通过 commit() 方法可将离屏渲染结果同步到关联的 Canvas 元素。

可以！OffscreenCanvas 支持 2D Context 和 WebGL/WebGL2 Context。在 Worker 中使用 WebGL 进行 3D 渲染是 OffscreenCanvas 的重要应用场景之一，能够将 GPU 计算也移出主线程。