可以在角组件模板中调用简单方法导致性能问题吗？

Question

通过阅读几个Angular资源（请参阅下文），模板中的调用方法可能会导致性能问题。例如：

<div>{{getDisplayName()}}</div>

但是，有许多Angular Material库示例在模板中调用方法。

树

https://material.angular.io/components/tree/examples

<mat-icon class="mat-icon-rtl-mirror">
    {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
</mat-icon>

带有选择的表

https://material.angular.io/components/table/examples

<td mat-cell *matCellDef="let row">
  <mat-checkbox (click)="$event.stopPropagation()"
                (change)="$event ? selection.toggle(row) : null"
                [checked]="selection.isSelected(row)"
                [aria-label]="checkboxLabel(row)">
  </mat-checkbox>
</td>

这些方法确实从Set中返回一个值。例如。https://github.com/angular/components/blob/4d4ee182de3f306c5fcf49853ef6ac71c4000eea/src/cdk/collections/selection.ts

isSelected(value: T): boolean {
   return this._selection.has(value);
}

这些方法是否会像*普通方法一样引起性能问题？还是我缺少什么？

资源

Does calling functions in templates cause performance issues in Angular2+?

https://blog.mgechev.com/2017/11/11/faster-angular-applications-onpush-change-detection-immutable-part-1/

Answer 1

该问题的最终答案是是-这将导致性能问题。幸运的是，实际上很容易演示，为什么以及如何克服它们。

出于说明的目的，我希望您复制一些垫子复选框，并将其插入应用程序中的某个位置。

然后，在checkboxLabel方法上，我希望您将控制台日志放在第一行。执行与页面的任何交互，理想情况下选中和取消选中其中一个框。

现在，如果您检查控制台，则可能希望看到checkboxLabel控制台日志，对于每个mat-checkbox都显示一次。因此，如果您放入3个，则希望看到它3次。

但是，如果您完全按照这些说明进行操作，您实际上会看到控制台日志，次数为[[许多，具体取决于您在测试页中保留的内容以及项目的设置。在许多人看来，我们当然是9+次。

这是怎么发生的？

本质上是Angular工作原理的核心，每当DOM发生变化时，具有这种方法的每个元素都必须重新评估。它并不会固有地缓存先前的值并进行比较，因此它必须再次执行计算并返回结果。

因此，如果您有20个div，其中包含displayName（），则每次更改都会有很多更改。可以理解的是，这会导致严重的性能问题。当您认为大多数页面的显示内容远远超出显示的内容时，您会看到人们如何努力保持其应用程序的性能，这不是因为他们不擅长编码-而是因为他们可能无法确切了解导致它落后于后台的原因。

您如何克服这个问题？

管道。

[如果我们改为将方法转换为仍然可以使用此方法的管道，则我们可以利用此缓存方法，并使我们的整体应用程序具有高性能。

Pipes仅返回不同的结果，并且仅当输入发生更改时才调用其函数。

因此，为了简便起见：让我们设置一个虚拟ts文件，该文件具有以下数组。

labelExamples = [
    { row: '1' },
    { row: '1' },
    { row: '3' }
]

以及具有以下代码的html文件：
<ng-container *ngFor="let l of labelExamples">
    <div>{{checkboxLabel(l.row)}}</div>
</ng-container>

最后，让我们跳回到ts文件，并说我们的checkboxLabel函数如下所示：
  checkboxLabel(row: string) {
    switch (row) {
      case '1':
        console.log("hello");
        return 'Row 1 Label';
      default:
        console.warn("hello from the other side");
        return 'Any other row label'
    }
  }

（（您可以使用它来测试我如上所述的内容。）
如果运行此命令，您将完全按照我的描述看到控制台实例的许多实例，它们分别是“ Hello”和“来自另一侧的Hello”。
但是，如果将其更改为管道，则可以将上面的内容转换为以下内容
import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'checkboxLabelPipe'
})
export class checkboxLabelPipe implements PipeTransform {
  transform(row: string | string): string {
    if (row) {
      return this.checkboxLabel(row);
    }
    return row;
  }

  checkboxLabel(row: string): string {
    switch(row) {
      case '1': 
        console.log('Row 1 called');
      return 'Row 1 Label';
      default: 
        console.log('Any other row called');
      return 'Any other row label'
    }
  }
}

请记住，这是一个管道，因此必须在使用它的NgModule或全局NgModule中进行声明。 
如果您改为运行此命令，保留相同的html文件和相同的labelExamples数组，则将看到与之前完全相同的结果，除非您在控制台日志中查找，您会看到更接近的结果本来期望的。 3个控制台日志。 
通过准确地了解在Angular中何时以及如何执行计算，以及何时最佳地使用函数或管道，您可以极大地提高整个应用程序的性能。 
您可以在Angular文档中阅读有关Pipe如何实现此目标的更多信息。Angular Pipes Documentation
此外，要获得更大的性能提升，您可以查看备忘录装饰器。The memo-decorator npm can be found here.它会缓存已经计算出的结果，并通过返回已存储的结果而不是将其放入整个过程中，从而为您节省更多性能。