离屏Canvas适用需同时满足内容长期不变且单次绘制开销明显高于drawImage，适合静态UI、固定图元等场景；盲目使用反而增加内存压力和同步成本。
离屏Canvas不是“加了就快”，而是要让缓存真正被复用、让重绘真正被跳过。它适合内容稳定、绘制开销大的场景，比如带阴影+渐变+文字的固定UI组件，或数据结构不变但需高频渲染的图表底图。
什么情况下该用离屏Canvas
关键看两个条件是否同时满足：
- 图形内容长期不变（例如按钮模板、图标、背景网格、静态图例）
- 单次绘制调用开销明显高于 drawImage（比如每帧调用10+次 fillRect / strokeText / addPath，而预绘制后只需1次 drawImage）
如果图形每帧都动态变化（如粒子系统、实时轨迹线），盲目缓存反而增加内存占用和同步成本，可能更慢。
怎么正确创建和使用离屏画布
优先用 OffscreenCanvas 构造函数（现代浏览器支持），而非 createElement('canvas') 模拟：
- 主线程中：const offscreen = new OffscreenCanvas(width, height);
- Web Worker 中也可直接使用，实现纯异步绘制
- 务必设置宽高属性（不能靠 CSS 缩放），否则渲染为空白
- 离屏画布无需挂载 DOM，也不触发页面重排重绘
缓存复用比创建更重要
很多性能问题出在“每次都重建离屏画布”或“每次重绘都清空重画”。实际应：
- 只在内容变更时才重绘离屏画布（例如主题切换、字体大小调整）
- 用 dirty 标志位控制更新逻辑，避免无谓重绘
- 对多层结构，可分层缓存（如底图层 + 标注层），按需刷新
注意状态管理与上下文隔离
离屏上下文（OffscreenCanvasRenderingContext2D）不继承主画布的状态：
- 每次使用前需显式设置 font、fillStyle、lineWidth 等
- 避免在循环中反复设置相同样式，可封装为预设配置函数
- drawImage 从离屏画布到主画布时，注意坐标、缩放和图像平滑度（imageSmoothingEnabled）
