Une brève discussion sur les conseils pour optimiser les performances de liaison (vérification sale) dans Angular

Cet article vous présentera les techniques d'optimisation des performances de la liaison Angular (dirty check). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.

1. Pourquoi devrions-nous optimiser

La liaison bidirectionnelle est une arme à double tranchant tout en améliorant l'efficacité du développement. sacrifie également les performances. Bien entendu, avec l'amélioration des performances matérielles et l'amélioration des performances propres d'Angular, pour les applications de complexité générale (petite et moyenne), les problèmes de performances peuvent être ignorés. Mais pour des scénarios spéciaux ou des pages complexes, nous devons traiter les problèmes de liaison de données séparément, sinon il y aura des retards et affectera l'expérience utilisateur. [Tutoriels associés recommandés : "Tutoriel angulaire"]

2 Habitudes de programmation

Des conseils et habitudes quotidiens peuvent être utilisés Améliorer les performances dans les liaisons angulaires. .

2.1. NgForOf, ajoutez trackBy pour améliorer les performances

trackBy est une fonction qui définit comment suivre les modifications dans les éléments itérables. Lorsque des éléments sont ajoutés, déplacés ou supprimés de l'itérateur, la directive doit restituer le nœud DOM approprié. Pour minimiser le taux de désabonnement dans le DOM, seuls les nœuds qui ont changé sont restitués.

Par défaut, les détecteurs de changement supposent que les instances d'objet identifient les itérables. Lorsque cette fonction est fournie, la directive utilise le résultat de l'appel de cette fonction pour identifier le nœud d'élément, plutôt que l'identité de l'objet lui-même.

2.2. Trois méthodes de liaison de données angulaires

<div>
    <span>Name {{item.name}}</span>  <!-- 1. 直接绑定 -->
    <span>Classes {{item | classPipe}}</span><!-- 2. pipe方式-->
    <span>Classes {{classes(item)}}</span><!-- 3.绑定方法调用的结果 -->
</div>

• Liaison directe : dans la plupart des cas, ce sont les meilleures méthodes de réalisation.

• Le résultat de l'appel de la méthode de liaison : lors de chaque processus de détection de valeur sale, l'équation des classes doit être appelée une fois. S’il n’y a pas de besoins particuliers, cette méthode d’utilisation doit être évitée autant que possible.

• méthode pipe : elle est similaire à la fonction de liaison à chaque fois que la classe de détection de valeur salePipe est appelée. Cependant, Angular a optimisé le canal et ajouté une mise en cache. Si l'élément est égal à la dernière fois, le résultat sera renvoyé directement.

<li *ngFor="let item of items; index as i; trackBy: trackByFn">...</li>

2.3 Sauf nécessité, utilisez la liaison unidirectionnelle pour réduire le nombre de valeurs de surveillance

Pour les données générales, elles doivent uniquement être affichées aux utilisateurs et ne doivent pas être modifiées. Ensuite, pour cette partie des données, utilisez simplement la liaison unidirectionnelle (ts->html).
Par exemple :

<!-- 也称插值绑定 -->
 <span>{{yourMessage}}</span>

3 ChangeDetectionStrategy.OnPush pour améliorer les performances<. 🎜>

Pour certaines pages très complexes, les conseils ci-dessus ne suffisent pas, mais Angular les prend également en considération et propose de nombreuses méthodes.

Comparaison angulaire AngularJS modifie la détection de la détection bidirectionnelle d'origine (parent->enfant, enfant->parent) à unidirectionnelle (parent->enfant). Ainsi, chaque détection de changement convergera de manière déterministe.
Lorsque Angular définit un composant, vous pouvez transmettre un élément de configuration de détection de changement comme

changeDetection: ChangeDetectionStrategy.OnPush | ChangeDetectionStrategy.Default;

La stratégie onpush détermine uniquement si la référence d'entrée (s'il s'agit d'un objet) a changé pour déterminer s'il faut effectuer une chèque sale. Par conséquent, nous pouvons utiliser la stratégie onpush pour réduire la surcharge de détection des changements.

4. Utilisez ngzone-runOutsideAngular pour optimiser

Angular s'appuie sur NgZone pour écouter les opérations asynchrones et effectuer la détection des modifications à partir de la racine. En d’autres termes, chaque addEventListener dans notre code déclenche une vérification sale. Mais si nous sommes très clairs, certaines des choses que addEventListener doit exécuter n'affecteront pas (ou pourront être ignorées) les résultats des données, sinon cela déclenchera une vérification sale. Par exemple, surveiller le défilement, surveiller les événements de la souris, etc.

Dans ce cas, nous pouvons utiliser le runOutsideAngular fourni par zone pour empêcher ces événements de déclencher des vérifications sales.

this.zone.runOutsideAngular(() => {
    window.document.addEventListener('mousemove', this.bindMouse);
});

5. Contrôler manuellement la vérification sale ChangeDetectorRef

L'instance ChangeDetectorRef d'Angular fournit une méthode pour lier ou dissocier la vérification sale d'un composant.

class ChangeDetectorRef {
  markForCheck() : void     // 通知框架进行变化检查/Change Detection
  detach() : void           // 禁止脏检查
  detectChanges() : void    // 手工触发脏检查， 从该组件到各个子组件执行一次变化检测
  checkNoChanges() : void
  reattach() : void         // detach逆操作，启用脏检查
}

6. Résumé

• Certaines petites habitudes de la vie quotidienne peuvent améliorer les performances angulaires

• Nous avons également des solutions pour les applications complexes ou lorsque des décalages surviennent !

Pour plus de connaissances liées à la programmation, veuillez visiter :

Enseignement de la programmation ! !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!