离屏渲染核心在于分层、复用和时机控制，而非简单添加OffscreenCanvas；适用图形长期不变且单次绘制开销显著高于drawImage的场景，如静态UI、固定图元；需通过dirty标志位控制更新、显式设置宽高及DPI适配，并避免每帧重绘。
Canvas 实现离屏渲染，核心不是“加个 OffscreenCanvas 就变快”，而是把该缓存的画一次、该复用的不重画、该隔离的不干扰主线程。真正起效的关键，在于分层、复用和时机控制。
什么时候该用离屏渲染
适合用离屏渲染的场景有明确特征：
- 图形内容长期不变：比如按钮背景、图标、网格底图、静态图例、带阴影/渐变的文字标题
- 单次绘制开销大：例如一次调用包含 10+ 次 fillRect、strokeText、clip 或复杂 Path2D 路径操作
- 高频合成但低频更新：主循环每帧 drawImage 合成，但离屏内容只在主题切换、数据结构定型、资源加载完成时才重绘
如果图形每帧都剧烈变化（如粒子系统、实时轨迹线），直接在主 Canvas 上绘制反而更轻量；盲目缓存会多占内存，还可能因同步开销拖慢整体帧率。
怎么创建可用的离屏画布
兼容性和尺寸设置比语法炫酷更重要。OffscreenCanvas 构造函数在 Safari 和部分安卓 WebView 中不可用，可靠做法是用 DOM 方式创建：
- 用 document.createElement('canvas') 创建，再显式设置 width 和 height 属性（不是 CSS 样式）
- 高 DPI 设备下，需按 window.devicePixelRatio 缩放：offscreen.width = canvas.clientWidth * window.devicePixelRatio
- 调试时可临时将离屏 canvas 插入页面并加 border，确认实际绘制区域是否匹配预期
如何避免“用了反而更卡”
性能下降往往源于误用，常见问题包括：
- 每帧都清空并重绘离屏画布：这等于把一次绘制拆成两次，还多占内存
- 没做变更判断就强制刷新：应监听真实触发源（如语言包加载完成、图片 onload、配置 change 事件）
- 未分层管理：把动态元素和静态背景画在同一离屏画布上，导致一动全重绘
推荐做法是引入 dirty 标志位，仅当底层数据或样式真正变化时，才触发对应离屏层的重绘。
提升绘制效率的细节配置
获取上下文时传入选项能带来可观收益：
- alpha: false：关闭透明度支持，GPU 渲染可提速 5–10%，适用于纯色背景或不需混合的场景
- desynchronized: true：启用异步渲染模式，减少主线程阻塞，对动态内容提升约 15%
- 避免 willReadFrequently: true：除非真要用 getImageData 读像素，否则开启会降低 20% 性能
注意：离屏上下文不继承主 Canvas 的状态，每次使用前需手动设置 font、fillStyle、lineWidth 等，建议封装为预设配置函数统一管理。
