Implémentez une détection plus rapide des modifications 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 des 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.
Ce post explique 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 répertorie 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 ;- 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é possède 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.
Examinons 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 parcourt tous les employés de la liste et affiche un élément pour chacun d'eux. 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 des composants suivante:
AppComponent est le composant racine de l'application. Ses composants enfants sont les deux instances de EmployeeListComponent. Chaque instance comporte une liste d'éléments (E1, E2, etc.) représentant les différents employés du service.
Lorsque l'utilisateur commence à saisir le nom d'un nouvel employé dans la zone de saisie d'un élément 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 cela peut être lent, ouvrez la version non optimisée du projet sur StackBlitz et essayez de saisir un nom d'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 pour les développeurs Chrome ont traité toutes les données de profilage collectées, un résultat semblable à celui-ci s'affiche:
Si la liste comporte de nombreux employés, ce processus peut bloquer le thread UI du navigateur et entraîner des pertes de frames, ce qui nuit à l'expérience utilisateur.
Ignorer les sous-arborescences des composants
Lorsque l'utilisateur saisit le texte du 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 une détection des 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 pur
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 pipe pur ne recalcule son résultat que s'il reçoit une entrée différente 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é, et appelle la méthode calculate définie dans EmployeeListComponent. Si vous déplacez le calcul vers une barre verticale pure, Angular recalcule la barre verticale uniquement lorsque ses arguments changent. Le framework déterminera si les arguments du pipe ont été modifiés en effectuant une vérification des références. Cela signifie qu'Angular ne recalculera pas la valeur numérique d'un employé, sauf si elle est modifiée.
Voici comment déplacer le calcul d'entreprise vers un pipe 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 pipe 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 plus fluide !
Pour voir l'effet de la dernière optimisation, essayez cet exemple sur StackBlitz.
Le code de l'optimisation directe 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
OnPushpour élaguer les sous-arbres d'un composant. - Déplacez les calculs lourds vers des pipelines pur pour permettre au framework d'effectuer la mise en cache des valeurs calculées.