[Bug]: When the amount of data on a custom node is large, the initialization is very slow and the drag and drop is stuck

[1055041142]

Describe the bug / 问题描述

自定义节点数据量较大时（5000 - 10000个节点），初始化很慢，拖拽画布和节点卡顿很厉害。

Reproduction link / 复现链接

https://stackblitz.com/edit/react-zfmr8xuw?file=index.js

Steps to Reproduce the Bug or Issue / 重现步骤

1、自定义节点较多时，初始化渲染很慢
2、已经添加了optimize-viewport-transform，拖拽画布、节点还是卡顿
3、自定义节点和线的render函数触发太频繁，如何进行节流操作

G6 Version / G6 版本

🆕 5.x

OS / 操作系统

• macOS
• Windows
• Linux
• Others / 其他

Browser / 浏览器

• Chrome
• Edge
• Firefox
• Safari (Limited support / 有限支持)
• IE (Nonsupport / 不支持)
• Others / 其他

[petercat-assistant]

您提到的问题是关于在使用 antvis/G6 时，自定义节点数据量较大（5000 - 10000个节点）导致初始化缓慢以及拖拽卡顿的问题。以下是一些可能的优化建议：

1. 优化渲染：

   • 确保使用了 optimize-viewport-transform，这可以帮助在视口变换时减少不必要的渲染。
   • 使用 requestAnimationFrame 来优化动画和渲染的频率。

2. 节流渲染函数：

   • 对于自定义节点和线的 render 函数，可以使用节流（throttle）或防抖（debounce）技术来减少函数调用的频率。

3. 简化节点和边的样式：

   • 尽量简化节点和边的样式，减少复杂的图形操作。

4. 虚拟化：

   • 如果可能，考虑使用虚拟化技术，只渲染当前视口内的节点和边。

5. 分批渲染：

   • 将节点和边的渲染分成多个批次，以减少一次性渲染的开销。

如果这些建议仍然无法解决您的问题，可能需要进一步分析具体的代码实现或考虑其他性能优化策略。

如果您有任何进一步的问题或需要更多帮助，请随时告诉我。

🪧 Tips

For further assistance, please describe your question in the comments and @petercat-assistant to start a conversation with me.