在 Angular 个组件模板中调用简单方法会导致性能问题吗？

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>

Table 与选择

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>

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

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

这些方法会像*普通方法一样导致性能问题吗？还是我遗漏了什么？

资源

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

Answer 1

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

出于说明的目的，我希望您复制一些这样的 mat-checkboxes，并将它们插入您的应用程序中的某个位置。

然后，在 checkboxLabel 方法上，我希望你在第一行放置一个控制台日志。与页面进行任何交互，最好选中和取消选中其中一个框。

现在，如果您检查控制台，您可能希望看到 checkboxLabel 控制台日志，每个 mat-checkbox 出现一次。因此，如果您放入三个，您会期望看到它 3 次。

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

这是怎么发生的？

本质上，Angular 工作方式的核心是，只要 DOM 发生变化，每个具有此类方法的元素都必须重新评估。它本身并不缓存之前的值并比较它们，所以它必须再次执行计算，并且 return 一个结果。

因此，如果您有 20 个带有 displayName() 的 div，那么每次更改都会有很多更改。可以理解的是，这会导致巨大的性能问题。当您认为大多数页面所显示的内容远不止这些时，您就会看到人们是如何努力保持其应用程序的性能的，这并不是因为他们不擅长编码 - 而是因为他们可能不明白到底是什么导致它落后于幕后。

你如何克服这个问题？

管道。

如果我们改为将我们的方法转换为仍然可以使用该方法的管道，我们就可以利用这种缓存方法，并使我们的整体应用程序高效。

Pipes 只会 return 不同的结果，并且只会在输入发生变化时调用它们的函数。

所以为了简单起见：让我们设置一个虚拟 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 from the other side"。

但是，如果我们将其更改为管道，我们可以将上面的内容转换为以下内容

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 文档中阅读更多关于管道如何实现这一点的信息。 Angular Pipes Documentation

此外，为了获得更大的性能提升，您可以查看备忘录装饰器。 The memo-decorator npm can be found here. 它缓存已经计算出的结果，并通过 returning 它存储的结果而不是让它们通过这个过程来节省更多的性能。

在 Angular 个组件模板中调用简单方法会导致性能问题吗？

Can Calling Simple Methods in Angular Component Templates Cause Performance Issues?

javascript

angular2-template

angular