跳到正文
English

Devlog #06 · Canvas 性能优化:脏矩形重绘

把全量重绘换成脏矩形,大文档帧率从 24fps 提到 58fps。

DigitalScope1 min

v0.6.0渲染引擎

canvasperformance

☰ 本文目录(2 节)

做了什么#

拖动单个节点时,不再清空整个画布重绘,而是只重绘受影响的脏矩形区域:

ts · dirty-rect.ts
function invalidate(node: Node) {  dirty.union(node.bounds.inflate(PADDING))  frame.request()          // 合并到下一帧统一处理}

效果#

文档规模优化前优化后
200 节点60fps60fps
2000 节点24fps58fps
5000 节点9fps41fps