关于HTML拓扑图打开卡顿或空白的分析及优化

【问题描述】

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

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

【场景介绍】

如下图：

【原因分析】

一、拓扑图背景

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

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

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

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

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

一、空白原因分析

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

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

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

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

而由于业务的需求，