离屏渲染是用内存换时间，将低频更新的高成本内容预绘制缓存，主画布仅贴图和局部更新；需按更新节奏分层缓存、控制粒度、适配像素比、关闭图像平滑并监控内存。
离屏画布不是“加个 OffscreenCanvas 就变快”，而是用内存换时间——把稳定不变或低频更新的内容提前画好、存起来，主画布只负责快速贴图和局部更新。真正起效的关键，在于分层、复用和时机控制。
按更新频率分层缓存
数万个节点或高频动画中，真正每帧都变的往往只有几十个。其余内容可拆解为逻辑图层，各自独立缓存：
- 背景层：网格线、坐标轴、底色等几乎不变化的内容，建一个大尺寸离屏 Canvas 一次性绘制
- 模板层：统一样式的节点、图标、按钮等，预绘到小尺寸离屏 Canvas（建议 ≤256×256），运行时批量 drawImage 复用
- 连接线层：固定拓扑关系的连线路径，缓存为 Path2D 对象或小离屏 Canvas，仅在增删边时重绘
- 动态层：拖拽中节点、高亮区域、实时轨迹等，保留在主 Canvas 上每帧绘制，不参与离屏缓存
精准控制重绘时机
离屏内容的价值在于“少画”，不是“多画”。必须监听真实变更源，而非每帧盲目重绘：
- 主题切换、语言包加载完成、精灵图 onload 后批量重建模板层
- 新增一类节点样式时，动态创建对应离屏 Canvas 并缓存
- 缩放级别变化超过阈值（如从 1.0 → 1.8）时，清空并按新比例重建相关离屏 Canvas
- 使用脏矩形机制：记录节点变动范围，仅 clearRect + 重绘受影响的局部区域
适配高 DPI 与避免常见坑
尺寸设错会导致模糊、裁剪或只显示左上角一小块；每帧重绘则等于额外增加一次开销：
- 离屏 Canvas 的 width/height 必须显式设置像素值，不能靠 CSS；高 DPI 设备需乘以 window.devicePixelRatio
- 主 Canvas 若用 CSS 缩放（如 width: 500px），离屏尺寸必须按实际渲染像素计算，例如 offscreen.width = 500 * devicePixelRatio
- 避免全屏一张离屏 Canvas：内存暴涨、缩放失真、更新僵化；应按功能块或集群拆分
- 关闭图像平滑：ctx.imageSmoothingEnabled = false，尤其对线条、图标类图形更清晰
- 获取上下文时禁用不必要的能力：getContext('2d', { willReadFrequently: false })
兼容性与兜底策略
OffscreenCanvas 在 Safari 和部分 WebView 中不可用，需主动降级并监控资源：
- 优先用 document.createElement('canvas') 创建离屏画布，它在所有现代浏览器中都可靠
- 定期估算内存占用（如 offscreen.toDataURL().length），总量超 20MB 时启动 LRU 清理
- 对长期不用的离屏 Canvas，主动释放：offscreen.width = offscreen.height = 0，促使 GC 回收
- 调试时可临时将离屏 Canvas 插入 DOM 并加 border，确认其实际绘制区域是否匹配预期
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
