antd
得G6
v5的alpha
版本发布了
总的来说对性能有了质的提升,搓搓手期待!基于v5版本的
demo
,发布会demo、视频我放下面了:
v5demo地址: G6 5.0:优雅 & 专业的图可视化引擎
v5发布会视频地址: G6 5.0:优雅 & 专业的图可视化引擎
性能问题
再使用过
G6
去画关系图的人应该有感受,当需要大数据去绘制的时候性能也没那么好,还有再交互逻辑上举两个例子:
- 我再批量需要更改节点样式做高亮状态的时候,当这个批量数据大于100就会卡顿了。
- 拖动卡顿再我批量选中一部分节点、边的拖动的时候也会卡顿。
- 绘制卡顿,再大数据给到
G6
的时候也会卡顿。
其实相对来说使用G6
的有一下几个优点:
- 易于使用:G6 的 API 非常简单和易于学习,即使您不熟悉图形学或数据可视化领域也能轻松上手。
- 自定义性高:G6 具有强大的自定义功能,可以自由地扩展和定制各种图形类型、样式和交互效果。
- 功能丰富:G6 支持多种布局算法和交互方式,包括力导向布局、树形布局、层次布局等。同时,它还支持节点拖拽、鼠标缩放、框选等交互效果。
- 社区活跃:G6 是 AntV 团队开发的,拥有庞大的社区和开发者生态系统,提供了大量示例和文档,方便开发人员快速入门和解决问题。
可以不用费很大成本就绘制出来一个关系图,而却有相对得中文文档易于维护。
其实当时我们都用G6
开发出来一个版本了,再接入大数据 需要高亮很多节点的时候发现卡顿临时更改方案替换成了d3 + svg
,我们把d3+svg
相关也做了很多优化可以看下这篇总结: 绘制出数万条节点、边的拓扑图
我们当时主要从一下几个方面做手段优化的:
- 避免程序种出现两层循环
- 屏幕外的节点、边不去绘制
- 对zoom优化
- 根据zoom值展现不同形态(简易形态、完整形态)
- 数据分层算法
- 分时渲染
- 节点拖拽
- 创建文档碎片 createDocumentFragment()
- 保存视图优化
- WebWorker
- WASM (WebAssembly)
- 样式
- 本地缓存 indexDB
有一说一,如果你搞了两年关系图,还一直被性能卡脖子,也是比较痛苦的。 都知道webgl
渲染引擎好,但是你用3d
去绘制2d
关系图还存在一些节点、边的频繁交互,其实像canvas
、webgl
其实拾取方案也是个难点。拾取方案就是事件系统(点击事件、鼠标事件)这些都需要去计算的,搞不好也是再性能浪费的问题。至于我们为啥没选呢!! 太难!搞不了。
G6 v5 带来了那些优化
带来了超强的性能优化。具体如下:
优化一:渲染引擎
渲染引擎支持
svg
、canvas
、webgl
、webgl-3d
优化二:支持根据缩放跳转绘制的形态
这个是再说可以根据不缩放的等级,支持用户自定义展现形态。例如我一个节点包含
圆背景、icon、文字
,可以让你再一定的值修改成只展现圆背景
,其实再很小的缩放等级下,用户是看不清什么信息的,是可以接受简易形态的。 绘制的元素少了这个性能当然就提升了!!!
优化三:使用 Rust+wasm做图计算
使用
wasm
做图计算,这个我们之前测试过相比js
的计算引擎能快到3-5倍左右。这个3-5
倍可是质的提升了。
优化四:多个画布分层
再使用
canvas
的时候有个概念叫做利用多个canvas
一块去绘制这个时候能就能充分利用他的渲染能力。再G6 v5
版本下也有个临时画布的概念
,就是当用户选中部分节点进行拖拽的时候,会把这部分需要操作的节点放到临时画布新的canvas
上,这个时候呢可能一直再重绘
的就是这个临时画布上的节点了,自然也就不会卡顿了。
优化五:支持设置主题
支持用户自定义主题。
优化六:扩展插件
支持自由的监听各生命周期时机、交互事件、需要制定再什么时机执行什么逻辑。
优化七: TreeShaking
精简内置布局、分析算法、插件。运行时扩展按需引入。
issue Hunt
管理员再
GitHub
仓库的issue
列表种发出待猎捕的需求。有现金取得,大家有实力可以去试试!!。
总结
其实当看到这个发布会视频得时候我整个人是兴奋得,太赞了。期待!! 期望能正式发布得那天。