X6与G6的性能对比, 以及X6多节点类型下的FPS临界点讨论

[Eve-Sama]

Describe the bug

做了个测试, 点击按钮可以快速生成50个节点, 拖拽节点进行移动. 我发现50个节点的时候fps还是57, 而当节点增加到100个时, fps则为十几, 卡顿非常明显

另外, 还有个有趣的现象. 如果拖拽的元素的编号越靠前, 则越顺畅, 反之越卡顿. 为什么fps会和拖拽元素的顺序有关系呢?

想请问下在100个元素下, 拖拽卡顿是正常的吗?

Your Example Website or App

https://eve-sama.github.io/x6-angular-shape/#/x6

Steps to Reproduce the Bug or Issue

1. 打开https://eve-sama.github.io/x6-angular-shape/#/x6
2. 点击2次生成50个节点的按钮, 产生100个节点.
3. 打开fps, 拖拽元素查看fps值会明显降低

Expected behavior

始终保持60上下fps

Screenshots or Videos

视频有点大, 我提供个OSS吧

Platform

• 操作系统: [macOS]
• 网页浏览器: [Google Chrome]
• X6 版本: [2.4.0 ]

Additional context

No response

[Eve-Sama]

我知道SVG比不了Canvas. 原理上就不可能比的过, 但是我想知道SVG卡顿的临界点在哪, 现在是50个就有卡顿感, 100个就没法用了基本上. 这是正常的吗?

[Max-ChenFei]

@Eve-Sama 请问是否考虑过 d3, Konva, fabric or Pixijs 等呢？

[Eve-Sama]

@Eve-Sama 请问是否考虑过 d3, Konva, fabric or Pixijs 等呢？

没有做过那几个lib的调研. 我的需求是实现流程图, 节点数多的话可能有几百个. 有什么好的推荐吗?

[Eve-Sama]

稍等, 为了更公平的对比, 我将x6和g6添加的节点都设置为了HTML类型.看发现在性能上差距并不明显, 怀疑可能和shape有关, 我再调试看看

[Max-ChenFei]

@Eve-Sama 请问是否考虑过 d3, Konva, fabric or Pixijs 等呢？

没有做过那几个lib的调研. 我的需求是实现流程图, 节点数多的话可能有几百个. 有什么好的推荐吗?

你好，我是自己写了一个库基于canvas的，基于canvas的几百个节点还是可以的。 我也是在对比基于svg，canvas, webgl的一些库。

[Eve-Sama]

将demo做了下改造, 以方便更加全面的对比.

G6

拖动性能

在HTML(准确的说是SVG)类型节点增加至1400时, 拖动时的FPS波动在50上下.

添加节点性能

在节点添加到200个时, 已经出现明显等待感. 随着数量的提升, 等待的时间越来越久. 当节点从1000添加至1050时耗时1.39秒.

X6

拖动性能

在HTML类型添加至7000时, 拖动的FPS波动在50上下.

但是Angular Component类型添加至2000时, FPS波动就已经到了50上下.

添加节点性能

无论是HTML还是Component, 从0增加至7000, 全程都是秒完成, 无任何卡顿感, 不确定临界值.

说明

• FPS低于60时会有明显卡顿感
• HTML结构越复杂, 对渲染影响越大, 为了方便对比, 两边采用的结构是差不多的.
• 拖拽速度越快, 对FPS要求越高. 我这里的拖拽速度是正常用鼠标的速度, 而非疯狂移动.
• 不同的设备的结果也不一样, 我的设备是 MBP-16inch-M1Max-64G-1TB
• 测试环境为开发模式, 理论上线上部署性能会更好, 可以访问 https://eve-sama.github.io/x6-angular-shape

[NewByVector]

@Eve-Sama 非常棒的性能分析。

[x6-bot]

This thread has been automatically locked because it has not had recent activity.

Please open a new issue for related bugs and link to relevant comments in this thread.