【问题描述】

在HTML端使用拓扑图时，在部分浏览器可能会出现渲染十分卡顿，甚至浏览器假死，或者出现拓扑图空白的情况

注：已在PT-151002 [8.1.0.20230921]补丁中优化

【场景介绍】

• 计划区向导，数据量庞大时，可能会出现上述情况

• 业务流程图等使用到拓扑图的场景，可能会出现上述情况
  

如下图：

【原因分析】

一、拓扑图背景

HTML端的拓扑图，实际上是以canvas元素做的渲染，可以理解为画布。

Canvas API 提供了一个通过JavaScript 和 HTML的<canvas>元素来绘制图形的方式。它可以用于动画、游戏画面、数据可视化、图片编辑以及实时视频处理等方面。

canvas绘制的图像都是由一个个小小的像素点构成，这意味着它属于原始类型，不会因为人为的放大而失真。

而这也会带来相对应的渲染时的性能问题。

由于每个像素点都要进行渲染，而浏览器的每个网页是一个独立的进程，内存分配由浏览器全权负责，页签无法直接调度计算机内存，这也导致了当HTML端渲染量过大时的卡顿。

一、空白原因分析

正是因为渲染的内存限制，不同浏览器也对canvas产生了不同的限制。

内存分配是一方面的限制，另一方面就是画布宽高的限制。

以Chrome浏览器为例，对canvas的宽高是有限制的，限制为16384个像素。

也就是说当宽高超出16384像素后，就会出现空白，或展示一个失败的图标：

而由于业务的需求，可能会出现拓扑图节点位置坐标超出宽高限制的情况，那么这时候就会出现空白了。

【星空优化方案】

【1】当超出限制时，做最大宽高绘制处理

如果某个节点或连线超出了浏览器的宽高限制，那么这时候浏览器会强制无法展示，因此我们在这时把拓扑图的宽高设置为限制临界值，以保证不超出浏览器原生限制的部分可以正常显示。

【2】当超限时，在当前表单抛出提示

因为做了临界值重绘，所以超出临界部分，会让使用者误以为丢失了。实际上如果放出超限部分，就整个拓扑图都看不到了没有意义。因此我们给出了提示，如果想要完整查看，请合理调整拓扑图以避免超出浏览器限制，或使用GUI端查看。

【3】异步渲染

每100个节点为一次渲染时机，做异步渲染处理，避免在节点数量过多时同步渲染导致假死。

【注意事项】

可能有部分浏览器或部分版本不会做限制（不同浏览器支持度不同），例如IE，但会以提升内存为代价做渲染，可能出现假死的情况，不是很推荐这样使用。