Canvas 渲染需主动分层缓存：背景层、模板层、连接线层用离屏 Canvas 复用，动态层每帧绘制；控制缓存粒度、精准触发重绘，并结合空间索引与脏矩形优化性能。
Canvas 本身不自动缓存，大批量复杂图形的渲染缓存必须靠开发者主动设计分层、复用和精准更新策略，核心是“把不变的画一次，把变化的只画局部”。
按更新频率分层缓存
数万个节点或图形中，真正每帧变动的往往不到1%。应拆成逻辑清晰的图层：
- 背景层：网格线、坐标轴、底色等几乎永不变化的内容，用一个离屏 Canvas 一次性绘制并复用
- 模板层：相同样式的节点（如统一尺寸的圆角矩形+图标）预绘成小离屏 Canvas（建议≤256×256），每个实例只 drawImage 复用
- 连接线层：拓扑稳定的连线路径可缓存为离屏 Canvas 或 Path2D 对象，增删边时才重绘该部分
- 动态层：仅保留拖拽中节点、高亮框、实时反馈等，由主 Canvas 每帧绘制，不参与缓存
控制缓存粒度与复用方式
避免“一张大图全塞进离屏 Canvas”，否则内存暴涨、缩放模糊、更新僵化：
- 单个离屏 Canvas 尺寸固定，不随窗口缩放变化；高 DPI 设备下乘以
window.devicePixelRatio后仍控制在合理范围（如 ≤512×512） - 网格背景按视口大小 + 100px 留白生成，滚动时平移复用，而非重绘整张
- 对节点分组容器（如折叠/展开区域）单独建离屏 Canvas，只在状态变更时刷新对应块
- 离屏 Canvas 实例复用，不用每次 new，也不在动画循环里重复创建 ctx
精准触发重绘，避免无效缓存
缓存的价值在于“少画”，不是“多画”。只有以下情况才重建离屏内容：
- 主题切换或样式批量变更 → 重建所有模板层离屏 Canvas
- 新增一类节点类型 → 动态创建对应尺寸的离屏 Canvas 并缓存其模板
- 缩放比例变化超过阈值（如从 1.0 → 1.8）→ 清空并按新比例重建相关离屏 Canvas
- 节点被显式修改（如文字内容、图标资源）→ 只刷新该节点所属模板的离屏 Canvas 区域
配合空间索引与脏矩形机制
纯靠分层还不够，需叠加计算优化：
- 用四叉树或 R-Tree 管理所有图形的空间位置，渲染前只查视口相交的子集，跳过 90%+ 的无效遍历
- 动态层启用脏矩形（dirty rectangle）：只记录变动区域坐标，每帧仅重绘受影响的小块，而非整层 clear + redraw
- 静态图层更新后，用
ctx.drawImage(offscreenCanvas, dx, dy)贴图，不走路径绘制流程
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
