OffscreenCanvas：Worker 渲染与性能实践

---

title: OffscreenCanvas：Worker 渲染与性能实践

keywords:

• OffscreenCanvas
• transferControlToOffscreen
• Worker 渲染
• 2D/WEBGL
• 帧率稳定

description: 使用 OffscreenCanvas 将绘制迁移到 Worker，减小主线程阻塞，提高帧率稳定性，并给出 2D/WEBGL 管线与消息通信建议。

categories:

• 文章资讯
• 技术教程

---

概述

OffscreenCanvas 允许在 Worker 中进行绘制，降低主线程负担。通过 HTMLCanvasElement.transferControlToOffscreen() 将控制权转移，并在 Worker 内获取上下文进行渲染。

用法/示例

<canvas id="view" width="800" height="600"></canvas>
<script type="module">
  const canvas = document.getElementById('view')
  const off = canvas.transferControlToOffscreen()
  const worker = new Worker('/render.js', { type: 'module' })
  worker.postMessage({ canvas: off }, [off])
</script>

// render.js (Worker)
self.onmessage = e => {
  const { canvas } = e.data
  const ctx = canvas.getContext('2d')
  function tick(t) {
    ctx.clearRect(0, 0, canvas.width, canvas.height)
    ctx.fillStyle = '#4f46e5'
    ctx.fillRect((t % 200), 100, 120, 80)
    self.requestAnimationFrame(tick)
  }
  self.requestAnimationFrame(tick)
}

工程建议

• 将交互与布局留在主线程，渲染计算放入 Worker；通过 postMessage 传递所需状态，避免频繁大对象拷贝。
• 对 WEBGL 使用 webgl/webgl2 上下文并在 Worker 中管理帧循环；根据设备能力调整分辨率与抗锯齿。
• 监控帧时间并分片重计算任务，保持交互响应与帧率稳定。

参考与验证

• MDN：OffscreenCanvas — https://developer.mozilla.org/docs/Web/API/OffscreenCanvas
• web.dev：OffscreenCanvas — https://web.dev/articles/offscreen-canvas