Implémentez une détection des modifications plus rapide pour améliorer l'expérience utilisateur.
Angular exécute régulièrement son mécanisme de détection des modifications afin que les modifications apportées au modèle de données soient reflétées dans la vue d'une application. La détection de modifications peut être déclenchée manuellement ou via un événement asynchrone (par exemple, une interaction utilisateur ou une fin XHR).
La détection de modifications est un outil puissant, mais si elle est exécutée très souvent, elle peut déclencher de nombreux calculs et bloquer le thread principal du navigateur.
Dans cet article, vous allez découvrir comment contrôler et optimiser le mécanisme de détection des modifications en ignorant certaines parties de votre application et en n'exécutant la détection des modifications que lorsque cela est nécessaire.
À l'intérieur de la détection des modifications d'Angular
Pour comprendre le fonctionnement de la détection de modifications d'Angular, examinons un exemple d'application.
Vous trouverez le code de l'application dans ce dépôt GitHub.
L'application liste les employés de deux services d'une entreprise (ventes et R&D) et comporte deux composants:
AppComponent
, qui est le composant racine de l'application, et- Deux instances de
EmployeeListComponent
, l'une pour les ventes et l'autre pour la R&D.
Vous pouvez voir les deux instances de EmployeeListComponent
dans le modèle de AppComponent
:
<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>
Chaque employé est associé à un nom et à une valeur numérique. L'application transmet la valeur numérique de l'employé à un calcul commercial et affiche le résultat à l'écran.
Examinez maintenant 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
accepte une liste d'employés et un nom de service comme entrées. Lorsque l'utilisateur tente de supprimer ou d'ajouter un employé, le composant déclenche une sortie correspondante. Le composant définit également la méthode calculate
, qui implémente le calcul commercial.
Voici le modèle pour 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>
Ce code itère sur tous les employés de la liste et, pour chacun d'eux, affiche un élément de liste. Il inclut également une directive ngModel
pour la liaison de données bidirectionnelle entre l'entrée et la propriété label
déclarée dans EmployeeListComponent
.
Avec les deux instances de EmployeeListComponent
, l'application forme l'arborescence de composants suivante:
AppComponent
est le composant racine de l'application. Ses composants enfants sont les deux instances de EmployeeListComponent
. Chaque instance contient une liste d'éléments (E1, E2, etc.) qui représentent les employés individuels du service.
Lorsque l'utilisateur commence à saisir le nom d'un nouvel employé dans la zone de saisie d'une EmployeeListComponent
, Angular déclenche la détection des modifications pour l'ensemble de l'arborescence des composants à partir de AppComponent
. Cela signifie que lorsque l'utilisateur saisit du texte dans la zone de saisie, Angular recalcule à plusieurs reprises les valeurs numériques associées à chaque employé pour vérifier qu'elles n'ont pas changé depuis la dernière vérification.
Pour voir à quel point cette opération peut être lente, ouvrez la version non optimisée du projet sur StackBlitz et essayez de saisir le nom d'un employé.
Vous pouvez vérifier que le ralentissement provient de la fonction fibonacci
en configurant l'exemple de projet et en ouvrant l'onglet Performances des outils pour les développeurs Chrome.
- Appuyez sur Ctrl+Maj+J (ou Cmd+Option+J sur Mac) pour ouvrir DevTools.
- Cliquez sur l'onglet Performances.
Cliquez maintenant sur Enregistrer (en haut à gauche du panneau Performances), puis commencez à saisir du texte dans l'une des zones de texte de l'application. Au bout de quelques secondes, cliquez à nouveau sur Enregistrer pour arrêter l'enregistrement. Une fois que les outils de développement Chrome ont traité toutes les données de profilage qu'ils ont collectées, un résultat semblable à celui-ci s'affiche:
Si la liste contient de nombreux employés, ce processus peut bloquer le thread d'UI du navigateur et entraîner des pertes de frames, ce qui nuit à l'expérience utilisateur.
Ignorer les sous-arbres de composants
Lorsque l'utilisateur saisit du texte dans le champ de saisie pour le EmployeeListComponent
ventes, vous savez que les données du service R&D ne changent pas. Il n'y a donc aucune raison d'exécuter la détection de modifications sur son composant. Pour vous assurer que l'instance de R&D ne déclenche pas la détection des modifications, définissez la changeDetectionStrategy
de EmployeeListComponent
sur OnPush
:
import { ChangeDetectionStrategy, ... } from '@angular/core';
@Component({
selector: 'app-employee-list',
template: `...`,
changeDetection: ChangeDetectionStrategy.OnPush,
styleUrls: ['employee-list.component.css']
})
export class EmployeeListComponent {...}
Désormais, lorsque l'utilisateur saisit du texte, la détection des modifications n'est déclenchée que pour le service correspondant:
Pour voir cette optimisation appliquée à l'application d'origine, cliquez ici.
Pour en savoir plus sur la stratégie de détection des modifications OnPush
, consultez la documentation officielle d'Angular.
Pour voir l'impact de cette optimisation, saisissez un nouvel employé dans l'application sur StackBlitz.
Utiliser des pipes purs
Même si la stratégie de détection des modifications pour EmployeeListComponent
est désormais définie sur OnPush
, Angular recalcule toujours la valeur numérique pour tous les employés d'un service lorsque l'utilisateur saisit la valeur correspondante dans la zone de texte correspondante.
Pour améliorer ce comportement, vous pouvez utiliser des canaux purs. Les canaux purs et impurs acceptent des entrées et renvoient des résultats pouvant être utilisés dans un modèle. La différence entre les deux est qu'un canal pur ne recalcule son résultat que s'il reçoit une entrée différente de celle de son appel précédent.
N'oubliez pas que l'application calcule une valeur à afficher en fonction de la valeur numérique de l'employé, en appelant la méthode calculate
définie dans EmployeeListComponent
. Si vous déplacez le calcul vers un pipe pur, Angular ne recalculera l'expression du pipe que lorsque ses arguments changeront. Le framework déterminera si les arguments du pipeline ont changé en effectuant une vérification de référence. Cela signifie qu'Angular ne recalculera pas les données, sauf si la valeur numérique d'un employé est modifiée.
Voici comment déplacer le calcul de l'entreprise vers un canal appelé 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);
}
}
La méthode transform
du canal appelle la fonction fibonacci
. Notez que le pipeline est pur. Angular considère tous les pipes comme purs, sauf si vous indiquez le contraire.
Enfin, mettez à jour l'expression dans le modèle pour EmployeeListComponent
:
<mat-chip-list>
<md-chip>
{{ item.num | calculate }}
</md-chip>
</mat-chip-list>
Et voilà ! Désormais, lorsque l'utilisateur saisit du texte dans la zone de saisie associée à un service, l'application ne recalcule plus la valeur numérique pour chaque employé.
Dans l'application ci-dessous, vous pouvez constater à quel point la saisie est fluide.
Pour voir l'effet de la dernière optimisation, essayez cet exemple sur StackBlitz.
Le code avec l'optimisation de pipeline pure de l'application d'origine est disponible ici.
Conclusion
En cas de ralentissement de l'exécution dans une application Angular:
- Profil de l'application avec les outils pour les développeurs Chrome pour identifier l'origine des ralentissements.
- Introduction de la stratégie de détection des modifications
OnPush
pour élaguer les sous-arbres d'un composant. - Transférez les calculs lourds vers des canaux purs pour permettre au framework de mettre en cache les valeurs calculées.