perf: optimize canvas renderer performance

[wang1212]

🤔 This is a ...

• New feature
• Bug fix
• Site / Document optimization
• TypeScript definition update
• Refactoring
• Performance improvement
• Code style optimization
• Test Case
• Branch merge
• Other (about what?)

🔗 Related issue link

see #1712

💡 Background and solution

Currently, there is not much optimization in the core process of G's canvas renderer, resulting in poor performance under large data volumes. The following strategies can be introduced to optimize performance:

• The forEach recursive call loop in the core code is refactored into a while loop to avoid stack overflow errors
• Avoid repeated transformation matrix calculations and canvas context matrix updates during rendering
• Avoid frequent save() and restore() calls to the canvas context state during the rendering process
• Support batch rendering

Since changes in the core program flow may cause unexpected results, the performance optimization mode can be enabled through a flag in the early stage to avoid affecting existing products.

const canvasRenderer = new CanvasRenderer({
   enableRenderingOptimization: true,
});

📝 Changelog

Language	Changelog
🇺🇸 English	perf: optimize canvas renderer performance
🇨🇳 Chinese	perf: 优化 canvas 渲染器性能

☑️ Self Check before Merge

• Doc is updated/provided or not needed
• Demo is updated/provided or not needed
• TypeScript definition is updated/provided or not needed
• Changelog is provided or not needed

[hustcc]

这个开启后有多少的优化效果？

[wang1212]

这个开启后有多少的优化效果？

在我的设备上测试：

• case1：1w 随机移动的矩形 fps 60 -> 95
• case2：2w 随机移动的矩形 fps 30 -> 45

发个版本后可以先验证下 s2 和 g6 的效果。

---

目前从性能数据来看，每一帧的耗时 30% 分布在属性解析和事件分发，70% 分布在元素渲染流程上。目前主要优化的是渲染流程，开启优化策略后该阶段耗时可以降低 50%~70%

[Aarebecca]

这个目的是？

[wang1212]

内部方法需要

[Aarebecca]

这里啥情况

[wang1212]

优化不是默认开启的

if (enableRenderingOptimization) {
  context.save();
  renderByZIndex(renderingContext.root, context);
  context.restore();
} else {
  renderByZIndex(renderingContext.root, context);
}