AntV G6 的坑之——从卡掉渣到满帧需要几步

AntV G6 是一款图可视化与分析开源引擎。《AntV G6 的坑之——XXX》系列文章持续更新中，总结常见问题及神坑解决方案。任何问题可在 GitHub Issue 中提问，求 GitHub Star ⭐️https://github.com/antvis/g6

原文链接：https://g6.antv.antgroup.com/manual/faq/performance-opt

在面对复杂数据的图可视分析，你的 G6 应用是否出现了卡顿、掉帧、不流畅现象？跟着本文的 tips 排查和优化，提升你的图可视化应用的性能。G6 的性能瓶颈主要在两个方面：渲染、计算。本小节介绍性能瓶颈的一些原理，对理论不感兴趣只想直接优化代码的小伙伴可以直接跳到解决方案章节。

性能瓶颈

性能瓶颈 — 渲染

在渲染方面，性能主要取决于当前画布上形状元素的个数，e.g. 一个节点上有矩形、文本、图片三个图形，一条边上有路径、文本两个图形，那么一份 100 个节点、50 条边的图数据，将渲染出 100 * 3 + 50 * 2 = 400 个图形。然而，开发者常常自定义非常复杂的节点，一个节点上可能有 10～20 个图形，那么画布上的图形数量将陡增。因此，尽可能地减少不必要的图形绘制，是提升渲染性能的主要手段。

性能瓶颈 — 计算

计算方面，主要包括节点布局计算、折线自动寻径算法等。

解决方案

G6 内部代码，我们在持续迭代其性能。而基于 G6 的图应用，则需要应用的开发者关注实现方式，不合理的实现方式很可能导致性能的额外开销。

定义合理的画布大小

一般来说，我们应当根据浏览器中容器的大小设置图画布的大小，即在图实例上配置的 width 与 height。目前主流显示器的分辨率来看，浏览器中放置图的容器长一般都不会超过 2500，高一般不会超过 2000。之前曾经遇到过开发者将图的 width 和 height 设置到几万，这造成了 标签的宽高非常大。这完全没有必要，因为大部分超出了浏览器视口。实际上，我们绘制的节点即使坐标达到了上万，我们仍然可以通过 drag-canvas、zoom-canvas 等交互滚动查看，没有必要设置巨大的图宽高。

尽可能选择 Canvas 渲染

相比于 Canvas，可能部分开发者更熟悉 DOM/SVG 的定义，毕竟 SVG 渲染出来之后可以审查元素，更符合我们的日常调试习惯。比如当你在自定义节点中使用 group.addShape('dom', {...}) 这种 ‘dom’ 图形时，就必须要使用 SVG 渲染，即在图实例上配置 renderer: 'svg'。但 SVG 的性能比 Canvas 差得多。 在数据较大、节点比较复杂的情况下，我们强烈推荐你使用 Canvas 进行渲染。Canvas 定义图形的方式也非常灵活，完全可以覆盖 SVG 的能力，或任何看起来像 DOM 定义的卡片样式的节点。比如下面这两个例子，都是使用 Canvas 渲染和定义。

• http://g6.antv.antgroup.com/examples/item/customNode/#card
• http://g6.antv.antgroup.com/examples/item/customNode/#cardNode

回到 SVG 容易审查这个优势，虽然 Canvas 上没有办法审查每一个图形，但我们可以通过下面方式打印图形的属性，进行调试：

// 整个图
const graphGroup = graph.getGroup(); // 整个图的根图形分组
const graphGroups = graphGroup.get('children'); // 一般会有 -node -edge -delegate 几个分组

// 单个节点（单个边/ combo 也类似）
const node = graph.findById('node1'); // 找到某个节点对象
const nodeShapeGroup = node.getContainer(); // 获取该节点的图形分组
const nodeShapes = nodeShapeGroup.get('children'); // 获取改节点中的所有图形
const keyShape = node.getKeyShape(); // 获取该节点的关键图形，keyShape 在 nodeShapes 中
const labelShape = nodeShapeGroup.find(ele => ele.get('name') === 'label-shape'); // 获取 name 为 'label-shape' 的图形（name 在 addShape 时指定）。labelShape 在 nodeShapes 中
console.log