最佳化 Angular's 變化偵測

導入更快的變更偵測功能,提供更優質的使用者體驗。

Angular 會定期執行變更偵測機制,對資料模型的變更都會反映在應用程式的檢視畫面中。您可以手動或非同步事件 (例如使用者互動或 XHR 完成) 來觸發變更偵測。

變更偵測是強大的工具,但如果頻繁執行,它可能會觸發大量運算,並封鎖主瀏覽器執行緒。

在本文中,您將瞭解如何略過應用程式的某些部分,只在必要時執行變更偵測功能,藉此控制變更偵測機制並進行最佳化。

Angular 的變更偵測作業

為了瞭解 Angular 的變更偵測功能的運作方式,讓我們來看看一個範例應用程式!

您可以在這個 GitHub 存放區中找到應用程式的程式碼。

這個應用程式會列出公司內兩個部門 (銷售、研發) 的員工,其中包含兩個元件:

  • AppComponent (應用程式的根元件)
  • 兩個 EmployeeListComponent 的執行個體,一個用於銷售,另一個用於研發。

應用程式範例

您可以在 AppComponent 的範本中看到 EmployeeListComponent 的兩個例項:

<app-employee-list
  [data]="salesList"
  department="Sales"
  (add)="add(salesList, $event)"
  (remove)="remove(salesList, $event)"
></app-employee-list>

<app-employee-list
  [data]="rndList"
  department="R&D"
  (add)="add(rndList, $event)"
  (remove)="remove(rndList, $event)"
></app-employee-list>

每位員工都有名稱和數值。應用程式會將員工的數值傳遞至業務計算結果,在螢幕上以視覺化方式呈現結果。

現在請看看 EmployeeListComponent

const fibonacci = (num: number): number => {
  if (num === 1 || num === 2) {
    return 1;
  }
  return fibonacci(num - 1) + fibonacci(num - 2);
};

@Component(...)
export class EmployeeListComponent {
  @Input() data: EmployeeData[];
  @Input() department: string;
  @Output() remove = new EventEmitter<EmployeeData>();
  @Output() add = new EventEmitter<string>();

  label: string;

  handleKey(event: any) {
    if (event.keyCode === 13) {
      this.add.emit(this.label);
      this.label = '';
    }
  }

  calculate(num: number) {
    return fibonacci(num);
  }
}

EmployeeListComponent 接受員工清單,以及部門名稱做為輸入內容。當使用者嘗試移除或新增員工時,元件會觸發對應的輸出內容。這個元件也會定義 calculate 方法,用於實作業務計算。

以下是 EmployeeListComponent 的範本:

<h1 title="Department">{{ department }}</h1>
<mat-form-field>
  <input placeholder="Enter name here" matInput type="text" [(ngModel)]="label" (keydown)="handleKey($event)">
</mat-form-field>
<mat-list>
  <mat-list-item *ngFor="let item of data">
    <h3 matLine title="Name">
      {{ item.label }}
    </h3>
    <md-chip title="Score" class="mat-chip mat-primary mat-chip-selected" color="primary" selected="true">
      {{ calculate(item.num) }}
    </md-chip>
  </mat-list-item>
</mat-list>

此程式碼會對清單中的所有員工進行疊代,且針對每個員工,轉譯清單項目。其中也包含 ngModel 指令,用於指定輸入內容與 EmployeeListComponent 中宣告的 label 屬性之間的雙向資料繫結。

使用 EmployeeListComponent 的兩個例項時,應用程式會形成下列元件樹狀結構:

元件樹狀結構

AppComponent 是應用程式的根元件。其子元件是 EmployeeListComponent 的兩個例項。每個執行個體都有一個項目清單 (E1、E2 等),代表該部門中的個別員工。

當使用者在 EmployeeListComponent 的輸入框中輸入新員工的名稱時,Angular 會觸發從 AppComponent 開始的整個元件樹狀結構變更偵測功能。換句話說,當使用者輸入文字時,Angular 會重複計算與每位員工相關的數值,確認員工自上次檢查後並未變更。

如要瞭解這項作業的速度有多慢,請開啟 StackBlitz 上的未最佳化專案,然後輸入員工名稱。

如要確認速度變慢是否來自 fibonacci 函式,請設定範例專案,然後開啟 Chrome 開發人員工具的「Performance」分頁。

  1. 按下 Control+Shift+J 鍵 (或在 Mac 上為 Command+Option+J 鍵) 開啟開發人員工具。
  2. 按一下「成效」分頁標籤。

接著點選「效能」面板左上角的「錄製」圖示 ,然後輸入應用程式中的其中一個文字方塊。如要停止錄影,請在幾秒鐘後再次點選「錄影」圖示 。Chrome 開發人員工具處理完收集的所有設定檔資料後,您會看到以下內容:

效能分析

如果清單中有許多員工,這項程序可能會阻斷瀏覽器的 UI 執行緒,並導致影格遺失,進而對使用者體驗造成負面影響。

略過元件子樹狀結構

當使用者輸入「sales」EmployeeListComponent 的文字輸入時,就知道「R&D」部門中的資料並未改變,因此沒有理由對其元件執行變更偵測功能。如要確保研發執行個體不會觸發變更偵測功能,請將 EmployeeListComponentchangeDetectionStrategy 設為 OnPush

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

@Component({
  selector: 'app-employee-list',
  template: `...`,
  changeDetection: ChangeDetectionStrategy.OnPush,
  styleUrls: ['employee-list.component.css']
})
export class EmployeeListComponent {...}

現在,當使用者輸入文字時,只有相應部門才會觸發變更偵測:

在元件子樹狀結構中變更偵測

您可以在這裡找到原始應用程式套用的最佳化作業。

如要進一步瞭解 OnPush 變更偵測策略,請參閱 Angular 官方說明文件

如要查看這項最佳化功能的效果,請在 StackBlitz 的應用程式中輸入新員工。

使用純管道

雖然 EmployeeListComponent 的變更偵測策略現在設為 OnPush,但當使用者輸入對應的文字輸入內容時,Angular 仍會重新計算部門中所有員工的數值。

如要改善這項行為,請妥善利用純管道。純管道和非純管道都會接受輸入,並傳回可用於範本的結果。兩者的差異之處,在於純管道只有在收到與先前叫用內容不同的輸入內容時,才會重新計算結果。

請注意,應用程式會根據員工的數值,計算要顯示的值,並叫用 EmployeeListComponent 中定義的 calculate 方法。如果您將計算結果移到純直立線,Angular 只會在引數變更時重新計算管道運算式。架構將執行參照檢查,判斷管道的引數是否已變更。也就是說,除非更新員工的數值,否則 Angular 不會重新計算。

以下說明如何將業務計算結果移到名為 CalculatePipe 的管道:

import { Pipe, PipeTransform } from '@angular/core';

const fibonacci = (num: number): number => {
  if (num === 1 || num === 2) {
    return 1;
  }
  return fibonacci(num - 1) + fibonacci(num - 2);
};

@Pipe({
  name: 'calculate'
})
export class CalculatePipe implements PipeTransform {
  transform(val: number) {
    return fibonacci(val);
  }
}

管道的 transform 方法會叫用 fibonacci 函式。請注意,直立線是純粹,除非您另行指定,否則 Angular 會將所有管道視為純粹。

最後,更新 EmployeeListComponent 範本內的運算式:

<mat-chip-list>
  <md-chip>
    {{ item.num | calculate }}
  </md-chip>
</mat-chip-list>

大功告成!現在,當使用者輸入與任何部門相關聯的文字輸入時,應用程式就不會重新計算個別員工的數值,

下面的應用程式可以讓你查看輸入的順暢度!

如要查看上次最佳化的效果,請試著在 StackBlitz 上試用這個範例

您可以在這裡取得採用純管道最佳化作業的程式碼。

結論

在 Angular 應用程式中,執行階段作業速度變慢時:

  1. 使用 Chrome 開發人員工具剖析應用程式,瞭解緩慢工作階段的來源。
  2. 引入 OnPush 變更偵測策略以縮減元件的子樹狀結構。
  3. 將繁重的運算作業移至純管道管道,讓架構執行運算值的快取作業。