非常大的嵌套数组 ngFor SVG 渲染性能问题，架构问题

Posted 2023-02-22

【中文标题】非常大的嵌套数组 ngFor SVG 渲染性能问题，架构问题

【英文标题】：Very large nested array ngFor SVG rendering performance issues, architecture question

【发布时间】：2020-05-19 23:46:35

【问题描述】：

我正在开发一个需要动态呈现 SVG 的企业应用程序。 SVG 用于显示平面图。 SVG 元素被描述到数据库中，并以 JSON 方式提供给前端，从而允许使用模板渲染图形。

我没有使用<img> 标签，因为我必须动态更改一些属性，例如viewBox 和transform 属性。

因此我有一个与架构相关的询问，我从后端获取非常大的数组（数千行），这些数组经过预处理和解析以获得适合我的组件的 JS 对象，最深层次的子数组只是一个。

该模板非常基础，它包括执行第一个 ngFor 循环以创建 <g>elements，然后遍历描述其他 SVG 实体（圆、路径、文本...）的嵌套对象

在我当前的示例中，第一个 ngFor 循环超过 800 个对象，随后的每个 ngFor 循环 1 到 5 个对象。

模板渲染非常缓慢（大约需要 8 秒）。问题是我必须在前端重建普通的 SVG。我尽可能使用<defs> 和<use>，但这并没有减少我必须执行的循环次数。

下面是模板的一部分：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="...">
  <g *ngFor="let layer of layers$ | async">
    <g *ngFor="let group of groups$ | async"
       [attr.id]="group.id"
       [attr.stroke]="group!.stroke"
       [attr.stroke-width]="group!.strokeWidth"
       [attr.fill]="group!.fill">

      <ng-container *ngFor="let entity of groups.entities" ngSwitch]="entity.entityType">

        <line *ngSwitchCase="SVG_ENTITY_TYPES.line"
              [attr.x1]="entity.startPoint.x"
              [attr.x2]="entity.endPoint.x"
              [attr.y1]="entity.startPoint.y"
              [attr.y2]="entity.endPoint.y"
              [attr.stroke-width]="entity.strokeWidth" />

        <path *ngSwitchCase="SVG_ENTITY_TYPES.path"
              [attr.d]="entity.data" />

        <!-- Other entity types -->

      </ng-container>
    </g>
  </g>
</svg>

以下是数据集中的示例节点，"id": 42 的对象是一个组。 groups 数组包含数百个。这个示例组只有一个 SVG 实体，但在真实数据集中它可能包含多个实体。

    "id": 42,
    "layerId": 1,
    "fill": "black",
    "stroke": null,
    "strokeWidth": null,
    "entities": [
        "stroke": null,
        "strokeWidth": 0.1,
        "entityType": 3,
        "transform": 
            "rotationAngle": 0.0,
            "rotationCenter": null,
            "translate": null,
            "scaleX": 0.0,
            "scaleY": 0.0
        ,
        "attributes": 
            "x1": "-2.425",
            "y1": "22.527",
            "x2": "-3.858",
            "y2": "22.527",
            "stroke-width": "0.1"
        ,
        "startPoint": 
            "x": -2.425,
            "y": 22.527
        ,
        "endPoint": 
            "x": -3.858,
            "y": 22.527
        
    ],
    "transform": 
        "rotationAngle": 0.0,
        "rotationCenter": null,
        "translate": null,
        "scaleX": 0.0,
        "scaleY": 0.0
    ,
    "attributes": 
        "fill": "black"
    ,
    "entityType": 10

从架构的角度来看，即使我意识到 Angular 不是一个专门用于在浏览器中进行图形渲染的框架，您是否有一些架构技巧或建议来克服这一挑战？

谢谢，

【问题讨论】：

我知道这些数据可能是机密的，但你能准备一个我们可以用来测试的样本数据集吗？

很遗憾，我无法分享有关 真实数据集 的任何特定数据，但是，我编辑了我的帖子以添加来自数据集的示例节点。

您需要以某种方式简化绘图，以便创建更少的对象。

只要可以绘制更少的对象，我就会使用定义。其余对象以尽可能简单的方式进行优化（例如使用一条路径而不是两个矩形）。其中一些需要拆分为两个单独的实体，两个允许用户在 UI 中进行交互（例如：旋转和平移）

【参考方案1】：

也许你应该尝试以某种方式缓存它 - 比如使用分页（我不确定我是否完全理解这种需求，但你不需要同时查看 800 多个视觉对象似乎是合理的）。

我的建议是尽可能延迟加载（一次加载 X 个项目），或者一次加载除显示 X 之外的所有项目。

【讨论】：

感谢您的建议，但它不适合我的需要。事实上，我必须渲染数组中的所有对象来组成 SVG，因为这些对象描述了平面特征，例如：墙壁、门、窗、家具......

【参考方案2】：

你可以尝试使用 trackBy 指令 看看这里： https://blog.bitsrc.io/angular-optimization-use-trackby-option-for-ngfor-directive-72c9509b2be9

【讨论】：

我已经在 groups 上使用 trackBy 函数，但是 group.entities 中的对象没有 ID，所以我不能在辅助 ngFor 循环上使用 trackBy。