Devlog #06 · Canvas 性能优化:脏矩形重绘
把全量重绘换成脏矩形,大文档帧率从 24fps 提到 58fps。
☰ 本文目录(2 节)
做了什么#
拖动单个节点时,不再清空整个画布重绘,而是只重绘受影响的脏矩形区域:
function invalidate(node: Node) { dirty.union(node.bounds.inflate(PADDING)) frame.request() // 合并到下一帧统一处理}效果#
| 文档规模 | 优化前 | 优化后 |
|---|---|---|
| 200 节点 | 60fps | 60fps |
| 2000 节点 | 24fps | 58fps |
| 5000 节点 | 9fps | 41fps |