离屏渲染需分层管理、按需更新、状态隔离，仅缓存长期不变且绘制开销大的静态内容；动态内容不宜缓存；应按功能分层创建复用 OffscreenCanvas，正确设置 DPI 和样式，避免常见陷阱如 DOM 模拟或粒度过粗/过细。
离屏渲染不是“加了就快”，而是把该缓存的静态内容真正缓存住、把该跳过的重绘真正跳过去。构建一个实用的离屏渲染管理系统，关键在于分层管理、按需更新、状态隔离，而不是堆砌多个 OffscreenCanvas。
明确哪些内容该进离屏画布
只把满足两个条件的内容放进离屏画布：内容长期不变（比如按钮模板、图例、网格背景、固定标题栏），且单次绘制开销明显高于 drawImage（例如含阴影+渐变+多段文字的 UI 组件，或带路径裁剪、多次 fillText 的图标）。动态内容如实时轨迹线、粒子动画、每帧变化的图表数据点，不适合缓存——强行塞进去反而增加内存压力和同步成本。
分层创建与复用离屏画布
- 按逻辑功能拆分图层：例如“底图层”（地图瓦片/网格）、“标注层”（标签、图例）、“控件层”（按钮组、状态指示器）
- 每个图层对应一个 OffscreenCanvas，宽高严格按实际像素设置（不依赖 CSS 缩放），高 DPI 设备下需乘以 window.devicePixelRatio
- 首次创建后长期持有，仅在内容变更时（如主题切换、语言切换、字体缩放）触发重绘，用 dirty 标志位控制更新逻辑
- 避免每帧 new OffscreenCanvas 或清空重画——创建和清空本身就有开销
正确使用离屏上下文与主画布合成
OffscreenCanvasRenderingContext2D 不继承主画布的状态，每次使用前必须显式设置 font、fillStyle、lineWidth、globalAlpha 等；建议封装预设样式函数，避免循环中重复赋值。drawImage 时注意三点：坐标对齐（避免半像素导致模糊）、imageSmoothingEnabled 控制缩放质量、必要时用 transferToImageBitmap 提升传输效率（尤其搭配 Web Worker 使用）。
避免常见陷阱
- 别用 document.createElement('canvas') 模拟离屏画布——它仍是 DOM 节点，会触发重排，应优先用 new OffscreenCanvas(width, height)
- 别把整屏内容塞进单个离屏画布——粒度太粗，一次变更就要全量重绘；也别为每个小图标单独建一个——内存碎片化严重
- 主线程中创建 OffscreenCanvas 后，可直接 getContext('2d') 使用；若需异步绘制，可在 Web Worker 中 new OffscreenCanvas 并传回 ImageBitmap
- 监控内存占用：大量高分辨率离屏画布易引发 OOM，可用 canvas.toDataURL() 辅助排查，或定期回收未被引用的离屏实例
