共计 1128 个字符，预计需要花费 3 分钟才能阅读完成。
针对下面存在的问题以及对需要的剖析，咱们能够进行如下的性能实现与设计：
首先是渲染计划的替换，将 svg 的渲染计划替换成 canvas 渲染，通过缩小页面中 DOM 的数量，进步前端渲染性能。
其次是不同场景的功能设计，通过下面的需要剖析，火山引擎 DataLeap 研发人员设计了不同的性能模式以满足不同的需要。
| 模式名称 | 性能 |
|---|---|
| 通用模式 | 剖析上游阻塞上游运行的起因、查看上游最晚实现的实例 |
| 统计模式 | 对依赖以后实例的所有上游进行分组查看 |
| 链路模式 | 剖析两个实例之间的链路关系 |
在通用模式中，用户关注的是节点上下游的关系，在简单链路中疾速找到阻塞节点，同时关注阻塞节点的信息。
针对简单链路，火山引擎 DataLeap 研发人员设计了多种优化模式：
首先，在同一层的节点超过肯定的数量（可自定义）后，所有节点将聚合在一起，火山引擎 DataLeap 研发人员称之为聚合节点。这种优化下，能够解决下面提到的因为同一层级节点过多，查找特定状态节点不便的问题。也反对点击聚合详情，通过列表的模式，查看所有被聚合的节点。并反对筛选，疾速查找到关注的节点并通过开展，复原与以后节点的依赖关系。
其次，以用户最关注的实例状态，对被聚合的节点进行分类，同时新增快捷开展操作。以下图为例，以后实例处于期待上游依赖实现状态，在这种状况下，用户关注的，则是上游没有开始执行的节点。在聚合节点中，能够清晰地看到存在一个实例，是在期待执行的，点击数字 1，即可疾速开展实例。
在这个例子中，就将不须要关注的上游胜利节点暗藏在列表中，突出图所须要关注的重点信息。
同时，为了升高节点展现过多导致图显示芜杂的状况，新增了收起性能及跳转性能。
收起性能是指在通过在聚合节点开展的节点的状况，或是在间接开展上 / 上游的状况下，都反对对某个上游 / 上游节点的整条链路收起，不便用户在浏览完一条链路后，复原图之前的状态，持续浏览下一条链路，缩小对后续剖析的烦扰。
跳转性能是在查看以后节点的上游的其余上游，或是上游的其余上游，此时，用户关注的节点曾经转化为其余的上游 / 上游节点。所以，通过跳转新页面的模式，将须要关注的不同节点的上 / 上游信息辨别开，缩小在一张图中展现所有信息。
并且因为图中的节点承载信息的能力无限，在通过点击节点时，会在下方呈现与选中实例相干信息，包含属性，日志等，帮助用户运维工作。
在统计模式中，用户关注的是依赖以后节点的上游节点，上游节点则能够分成间接上游和所有上游。所以火山引擎 DataLeap 研发人员设计了分层模式和合并模式，在这两种模式下，能够依照工作的属性（工作类型 / 实例状态 / 责任人等）作为分组维度。
分层模式：
合并模式：
所谓链路模式即指定上游节点，一键展现指定节点与以后节点的链路信息，从而进行精准链路剖析。
