Angular 9 - 组件输入和输出性能调优

Question

我正在使用 Angular 9，在我的应用程序中我已经建立了一个表格。每个表格单元格都是它自己的组件。每行大约有 10 个单元格。

单元格组件看起来像这样：

<cell
      [name]="obj.name"
      [field1]="obj.field1"
      [field2]="obj.field2"
      [field3]="obj.field3"
      [field4]="obj.field4"
      [field5]="obj.field5"
      [field6]="obj.field6"
      [field7]="obj.field7"
      [field8]="obj.field8"
      [field9]="obj.field9"
      [field10]="obj.field10"
      (onEvent1)="someFn1()"
      (onEvent2)="someFn1()"
      (onEvent3)="someFn1()"
      (onEvent4)="someFn1()"
     ></cell>

当前的问题是，如果表中有很多行，即超过 25 行，则加载速度可能会很慢并且交互速度会很慢。我已经设置了 ChangeDetectionStrategy.OnPush 策略，它提高了性能。我正在尝试寻找其他可能会影响并有以下问题的事情：

1. 如果具有 onpush 策略的组件有很多输入，这会影响性能吗？如果在上面的示例中说我传递了 obj 而不是每个单独的字段，我应该看到改进吗？

2. 有很多输出 (onEvent1) 会影响性能吗？

3. 如果单元格 component.ts 有很多打字稿代码（即特定功能），这会导致加载时间变慢还是仅依赖于 html 模板？将此代码移至服务是否更好？

我很欣赏人们对此的意见，因为到目前为止，大多数文章都讨论 onPush 策略并且没有讨论上述内容。

Answer 1

我为您的不同场景创建了 2 个测试（一个胖组件与一个小组件），我检查了创建内容的 constructor 和 AfterViewInit 之间的时间，结果是：

1. large component 的平均 120 毫秒（这是具有许多输入/输出的那个）
2. 平均 70 毫秒 对于small component （在我在field1 上创建所有内容的小组件上，所以实际上都一样数据在两个测试中传输）

在上面的链接中，我创建了 2 个 stackblitz，因此您可以看到不同之处。