面试题：Angular插值表达式在动态数据显示与性能优化的关联

插值表达式对性能产生影响的原理

脏检查机制：
- 在Angular中，脏检查是检测数据变化的核心机制。当一个事件（如用户交互、定时器触发等）发生时，Angular会从根组件开始遍历整个组件树，检查每个组件及其绑定的数据是否发生变化。
- 插值表达式是数据绑定的一种形式，例如 {{ variable }}。每次脏检查运行时，Angular都会评估这些插值表达式以确定是否需要更新视图。
- 由于脏检查会检查整个组件树，频繁使用插值表达式意味着在每次脏检查时需要进行更多的求值运算，这增加了脏检查的工作量，从而影响性能。
频繁求值开销：
- 对于动态数据，每次脏检查时，插值表达式都要重新求值。如果动态数据变化频繁，例如在一个频繁更新的计数器场景下，每次脏检查都要重新计算插值表达式 {{ counter }}，这会带来额外的计算开销。

优化插值表达式使用以提升性能的方法

使用 OnPush 策略：

原理：对于包含列表项的组件，将组件的 changeDetection 属性设置为 ChangeDetectionStrategy.OnPush。这会使Angular仅在以下情况运行脏检查：
- 输入属性（@Input()）发生引用变化。
- 组件接收到事件（如点击事件）。
- 通过 Observable 触发的异步数据更新。

示例：

import { Component, ChangeDetectionStrategy } from '@angular/core';

@Component({
  selector: 'app - list - item',
  templateUrl: './list - item.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class ListItemComponent {
  @Input() item: any;
}

在包含大量列表项的父组件中：

import { Component } from '@angular/core';

@Component({
  selector: 'app - list',
  templateUrl: './list.component.html'
})
export class ListComponent {
  items = [/* 大量列表项数据 */];
}

<!-- list.component.html -->
<app - list - item *ngFor="let item of items" [item]="item"></app - list - item>

减少不必要的插值：

原理：避免在插值表达式中进行复杂计算。如果需要展示经过计算后的值，可以在组件类中提前计算好，并在插值表达式中直接使用该计算后的属性。

示例：假设列表项需要展示一个格式化后的日期，避免在插值中格式化：

<!-- 不好的做法 -->
<div *ngFor="let item of items">{{ item.date | date:'yyyy - MM - dd' }}</div>

import { Component } from '@angular/core';
import { formatDate } from '@angular/common';

@Component({
  selector: 'app - list',
  templateUrl: './list.component.html'
})
export class ListComponent {
  items = [/* 大量列表项数据，每个项包含date属性 */];
  constructor() {
    this.items.forEach(item => {
      item.formattedDate = formatDate(item.date, 'yyyy - MM - dd', 'en - US');
    });
  }
}

<!-- 好的做法 -->
<div *ngFor="let item of items">{{ item.formattedDate }}</div>

使用 trackBy：

原理：在 *ngFor 中使用 trackBy 函数可以帮助Angular更高效地识别列表项的变化。Angular默认通过对象引用检查列表项的变化，使用 trackBy 可以指定一个唯一标识来检查变化，从而减少不必要的DOM更新。

示例：

import { Component } from '@angular/core';

@Component({
  selector: 'app - list',
  templateUrl: './list.component.html'
})
export class ListComponent {
  items = [
    { id: 1, data: 'item1' },
    { id: 2, data: 'item2' }
  ];
  trackByFn(index: number, item: any): number {
    return item.id;
  }
}

<!-- list.component.html -->
<div *ngFor="let item of items; trackBy: trackByFn">{{ item.data }}</div>

星途面试题库

面试题：Angular插值表达式在动态数据显示与性能优化的关联

知识考点

面试题答案

插值表达式对性能产生影响的原理

优化插值表达式使用以提升性能的方法