流程图控件GoJS教程：GoJS图表的感知性能注意事项

---

GoJS是一款功能强大，快速且轻量级的流程图控件，可帮助你在JavaScript 和HTML5 Canvas程序中创建流程图，且极大地简化您的JavaScript / Canvas 程序。

点击下载GoJS最新版

性能考量

当图表仅限于数百个节点和链接时，尤其是在桌面上，则为图表获得良好的性能并不需要您付出任何努力。但是，当您的应用程序可能处理成千上万个节点和链接时，您可能需要调整实现以避免昂贵的功能。

图表的感知性能取决于许多不同的因素。

• 在相同的硬件平台上，JavaScript代码通常比Java或.NET代码慢几倍至几倍。
• 不同浏览器和浏览器版本之间的JavaScript代码性能有所不同。
• 内存限制（特别是在移动设备上）会影响性能。
• 不同平台上的绘图性能可能会有很大差异。
• 绘图和动画效果占用资源。
• 复杂的节点或链接比简单的节点或链接更慢地构建，更新和绘制。
• 有些布局本来就比其他布局慢。

效果和外观

绘制阴影相对昂贵，因此请考虑不要将Part.isShadowed设置为true。渐变画笔比纯色的绘制速度慢。复杂形状 几何图形比简单形状几何图形绘制速度慢，并且在计算交点时需要更多的计算。

动画占用资源；考虑将AnimationManager.isEnabled设置为false。

构造节点并调整其大小

保持节点和链接尽可能简单。限制模板中使用的GraphObject数量。在可行的情况下使用更简单的面板类型-“表格”面板功能最强大，但是也许您可以只使用“水平”面板，“垂直”面板，“ Spot”面板或“自动”面板。面板中应包含两个或多个元素（尽管可能会有例外）。如果面板中没有元素，请删除该面板。如果面板中只有一个元素，请考虑卸下面板并将该元素合并到面板的包含面板中。

不包括不可见的对象。限制多少数据绑定使用，并避免绑定s的无源属性名称或者是Binding.ofObject。

如果您有图片，并且事先知道其预期大小，则最好设置其GraphObject.desiredSize （或GraphObject.width和GraphObject.height），以便在图像加载后不必重新测量。当节点更改大小时，可能需要再次执行“布局”，因此具有固定大小的节点有助于减少图的布局。通常，在节点的元素上设置GraphObject.desiredSize，尤其是Picture，将加快GoJS测量和排列构成节点或链接的Panel的速度。

链接

在非常大的图中 ，Link.routing属性值Link.AvoidsNodes可能会变慢。考虑不要在注重性能的大型图形中使用它，或者不打算在初始布局完成后设置它（使用“ InitialLayoutCompleted” Diagram事件侦听器），或者最好在那时仅在选择链接上设置它。

使用Link.curve值为Link.JumpOver或Link.JumpGap的速度比不必计算此类链接交叉并绘制小弧或绘制间隙的所有点要慢得多。

版面

GridLayout和TreeLayout很快。LayeredDigraphLayout很慢。

虚拟化

对于具有许多节点和链接的图表，这些节点和链接一次只显示其中的一小部分，您可以实施某种形式的虚拟化来优化您的图表。“虚拟树”示例总共包含123,456个节点，但由于它仅构造与视口相交的节点和链接，因此加载和渲染的速度相当快。

但这确实使图的实现复杂化，因为您需要使用与Diagram.model不同的模型，并在视口更改时管理添加和删除节点和链接。此外，布局更复杂，因为它需要在LayoutVertex和LayoutEdge上工作，而不是在Node和Link上工作。

其他虚拟化示例在示例索引中列出。

其他注意事项

如果要取消图表与HTML Div元素的关联，请将Diagram.div设置为null。如果删除HTML DOM的一部分，其中包含带有图的Div，则需要将Diagram.div设置为null，以使页面能够垃圾回收内存。

根据您的应用程序，当存在较慢的环境（例如在移动设备上）时，有选择地关闭某些功能（例如阴影和动画）或完全使用更简单的模板可能是值得的。

您可以使用多个模板，具体取决于您的缩放级别。如果缩小得足够远（因此屏幕上有很多节点），则可以切换到简化模板，以便更快地渲染（在平移，拖动等时）。但是，切换模板的过程会降低性能，因为零件必须自行重建。

如果您认为可以从其他图形优化中受益，那么会遇到独特或节点数量多的图表情况，请。

---

想要购买GoJS正版授权，或了解更多产品信息请点击