Canvas性能优化核心是“少画、准画、smart画”，通过按需更新与局部重绘、精准标记并合并脏区、只清空绘制脏区、分层+离屏缓存静态内容、缓存快照比对、跳过冗余绘制等策略实现。
Canvas 性能优化的核心不是“画得更快”，而是“少画、准画、 smart 画”。按需更新与局部重绘，正是把“每次重画整张画布”变成“只动该动的一小块”的关键策略。
精准标记脏区（Dirty Region）
脏区是你真正需要重绘的最小矩形区域。不靠猜测，而靠计算：
- 每次图形位置、颜色、文本内容等发生变化时，立刻计算其影响范围——比如一个半径为12的圆从(100,80)移到(130,95)，脏区就是以(88,68)为左上、(142,107)为右下构成的矩形
- 用 Math.floor() 对齐像素坐标，避免 sub-pixel 清除引发抗锯齿抖动或模糊
- 多个变化区域合并为一个联合矩形：取所有 x 的最小值、y 的最小值，再算出最大 x+w 和最大 y+h，重新得出 width/height
- 维护一个全局 dirtyRect = {x, y, width, height}，初始为 null；每次调用 markDirty(x, y, w, h) 进行合并
只清空、只绘制脏区
全量 clearRect(0, 0, canvas.width, canvas.height) 是性能黑洞，尤其在高分辨率或高频刷新场景下：
- 重绘前先执行 ctx.clearRect(dirtyRect.x, dirtyRect.y, dirtyRect.width, dirtyRect.height)
- 若脏区内含阴影、半透明叠加或 globalAlpha 变化，单纯 clearRect 可能破坏混合效果——此时应切换到离屏缓存+合成方案
- 若脏区完全超出画布可视范围（如 x + w ≤ 0 或 y ≥ canvas.height），直接跳过本次重绘
分层 + 离屏缓存静态内容
把“不变的”和“常变的”分开管理，是降低重绘开销最有效的结构设计：
- 创建离屏 canvas（offscreenCanvas），一次性绘制背景网格、底图、UI 边框等静态元素
- 主 canvas 只负责动态对象（如移动节点、拖拽连线、实时文字）
- 局部刷新时：先用 ctx.drawImage(offscreenCanvas, dirtyRect.x, dirtyRect.y, dirtyRect.width, dirtyRect.height, dirtyRect.x, dirtyRect.y, dirtyRect.width, dirtyRect.height) 把静态部分“盖”回去，再在其上绘制最新动态内容
- 对文本、路径等对象缓存上一帧的序列化快照（如 JSON.stringify({text, font, x, y})），仅当比对不同时才标记脏区
跳过冗余绘制与轻量判断
很多卡顿其实来自“本不该画却画了”的操作：
- 动画中位移增量小于 0.5px 且无缩放/旋转变化时，可忽略本次更新（防过度重绘）
- 使用 ctx.save() / ctx.restore() 包裹局部样式变更，避免污染全局状态；但更推荐批量同样式绘制，减少 save/restore 调用
- 每帧开始前做轻量可见性判断：检查目标区域是否在当前视口内（结合 scrollX/Y、scale 做坐标映射）
- 合并绘制命令——比如画多条同色线，不要每条都 beginPath→moveTo→lineTo→stroke，而应统一 beginPath，循环 moveTo/lineTo，最后单次 stroke
