OffscreenCanvas：Worker 渲染与性能实践

概述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/OffscreenCanvasweb.dev：OffscreenCanvas — https://web.dev/articles/offscreen-canvas