离屏渲染(off-screen rendering)是指把渲染结果输出到屏幕外的缓冲区(纹理、帧缓冲、离屏 canvas 等),然后再把该结果用于合成、后处理或最终显示。常用于避免闪烁、并行渲染、后处理特效、生成缩略图或在后台线程绘制。
要点
- 常见实现:Web:OffscreenCanvas、WebGL FBO(framebuffer)/render-to-texture;桌面:OpenGL FBO、DirectX 渲染目标、Vulkan 图像。
- 优点:消除闪烁、支持异步/Worker 渲染、方便后处理(模糊、色调映射)、可重用纹理减少重复计算。
- 缺点:额外内存和拷贝、需要同步(可能阻塞)、管理生命周期复杂。
- 最佳实践:重用缓冲区/纹理、尽量在 Worker 中使用 OffscreenCanvas 做计算密集型 2D 渲染、选择合适像素格式、避免频繁大小变更。
简短示例(使用 OffscreenCanvas 在 Worker 中离屏绘制并传回主线程显示):
1 | // main.js |
简要说明:主线程把 canvas 转为 OffscreenCanvas 传给 Worker,Worker 在离屏 canvas 上绘制并可把结果以 ImageBitmap/Blob 等形式回传或直接让浏览器合成显示。

























