关于大数据量性能优化请教 #4333

问题描述

大概有三个性能相关问题, 关于交互与布局方面的优化: 一、交互如何优化? 目前在做一个公司员工的关系图, 小到 100+, 大到 1~10 万+数据量, 目前发现了一个很大的性能瓶颈就是->节点/边的遍历; 因为产品的交互比较定制化,所以没有采用 g6 内部提供的Behavior, 例如典型的activate-relations,鼠标移入移出效果, 而是采用了节点监听事件(node:mouseenter / node:mouseleave),来达到鼠标移入移出效果, 我的处理是: 鼠标移入时, 遍历所有 nodes, 然后高亮nodeItem,以及 nodeItem.getNeighbors()..., 然后其他节点全部淡出, 类似的这种操作还有很多, 例如点击选中节点,也是如此,需要遍历整个 nodes; 请问这种场景应该如何处理, 可以达到性能更优? 因为目前 1000+的时候, 就明显感觉到了有一些掉帧

二、setItemState / updateItem 我目前处理交互是使用setItemState来控制不同的样式变化, 还未尝试使用updateItem, 请问这两种哪一种性能更优,更推荐来做交互操作?

三、布局性能 在这篇文章中: http://g6.antv.antgroup.com/manual/faq/performance-opt 我看您说 force2性能优秀, fruchterman性能较差, 实际几种布局我都尝试过, 在数据量 3000+(node: 1000, edge:2000)的时候, force2布局在开启了 animate 的情况下. 节点初始位置展示出来只用了1s左右, 但是在不断的布局计算过程, 动画一直持续了 30s+, 才完成最后的布局(动画停止), 也就是说,如果不开启animate, 页面将会有 30s 的白屏, 才会显示出图; 而在使用fruchterman布局, render 过程大概有 2s 左右的白屏, 然后就完成了布局, 这个性能差距巨大, 是我设置有误还是理解有误, 为何fruchterman会性能好这么多? 以我的项目来说, 布局很纠结, 我测试的三种布局的优缺点: 1. force2, 布局计算持续 30s, 节点一直在不断移动, 时间太久, 但是布局完成后,节点不会重叠在一起; 2. force 性能适中, 节点动画移动较快, 可以接受动画的时间, 节点也不会重叠, 但是动画无法取消; 3. fruchterman, 布局最快, 但是布局完成后,节点重叠gravity/clusterGravity已经设置了很小的值, 关系较为频繁的节点还是会重叠; 所以对于布局, 目前从性能角度选择了fruchterman, 但节点会重叠..所以很纠结

请老师指教~

重现链接

无

重现步骤

暂无

预期行为

暂无

平台

• 操作系统: [macOS, Windows, Linux, React Native ...]
• 网页浏览器: [Google Chrome, Safari, Firefox]
• G6 版本: [4.5.1 ... ]

屏幕截图或视频（可选）

补充说明（可选）

暂无