Comment exploiter l'optimisation des performances Angular4

Cette fois, je vais vous montrer comment faire fonctionner Angular4Optimisation des performances, quelles sont les précautions pour faire fonctionner l'optimisation des performances Angular4, ce qui suit est un cas pratique, jetons un coup d'œil.

Résumé

La détection de valeurs sales dans Angular 4 est un vieux sujet, et la compréhension de ce modèle est la base de l'optimisation des performances angulaires. Par conséquent, aujourd'hui, nous parlerons du principe de détection des valeurs sales dans Angular 4 et examinerons quelques conseils pour optimiser les performances.

Point d'entrée - Zone.js

Angular 4 est un framework MVVM. Une fois le modèle de données (Model) converti en modèle de vue (ViewModel), il est lié à la vue (View) et rendu dans une page visible à l'œil nu. Par conséquent, découvrir le moment où le modèle de données change est la clé pour mettre à jour la page et appeler la détection de valeurs sales.

Après analyse, les ingénieurs ont découvert que les modifications des données sont souvent causées par des événements asynchrones tels que les macrotâches et les microtâches. Par conséquent, en réécrivant toutes les API asynchrones dans le navigateur, les modifications des données peuvent être efficacement surveillées depuis la source. Zone.js est un tel script singe (Monkey Patch). Angular 4 utilise une zone personnalisée (NgZone), qui informe Angular qu'il peut y avoir des changements de données et qu'il doit mettre à jour les données dans la vue (détection de valeurs sales).

Détection de valeur sale (Détection de changement)

Le principe de base de la détection de valeur sale est de stocker l'ancienne valeur et, lors de la détection, de comparer la nouvelle valeur à la valeur actuelle moment avec l'ancienne valeur Comparaison de valeurs. S'ils sont égaux, il n'y a pas de changement. Sinon, un changement est détecté et la vue doit être mise à jour.

Angular 4 divise la page en plusieurs composants pour former une arborescence de composants. Après avoir entré la détection des valeurs sales, la détection est effectuée de haut en bas à partir du composant racine. Angular a deux stratégies : Default et OnPush. Ils sont configurés sur le composant et déterminent différents comportements lors de la détection de valeurs sales.

Default - Stratégie par défaut

ChangeDetectionStrategy.Default. Cela signifie également que ce composant est toujours testé dès qu'un événement susceptible de modifier les données se produit.

L'opération de détection des valeurs sales peut essentiellement être comprise comme les étapes suivantes. 1) Mettre à jour les propriétés liées au sous-composant, 2) Appeler les hooks NgDoCheck et NgOnChangesLifecycle du sous-composant, 3) Mettre à jour son propre DOM, 4) Détecter la valeur sale du sous-composant. Il s'agit d'une équation récursive partant de la composante racine.

// This is not Angular code
function changeDetection(component) {
 updateProperties(component.children);
 component.children.forEach(child => {
  child.NgDoCheck();
  child.NgOnChanges();
 };
 updateDom(component);
 component.children.forEach(child => changeDetection(child));
}

Nous, les développeurs, accorderons une grande attention à l'ordre des mises à jour du DOM et à l'ordre d'appel de NgDoCheck et NgOnChanges. On peut le trouver :

1. Les mises à jour DOM sont axées d'abord sur la profondeur

2. NgDoCheck et NgOnChanges ne le sont pas (et ne sont pas non plus sur la profondeur)

OnPush - stratégie de détection unique

ChangeDetectionStrategy.OnPush. Ce composant n'est détecté que lorsque les propriétés d'entrée changent (OnPush). Par conséquent, lorsque l’entrée ne change pas, elle n’est détectée que lors de l’initialisation, également appelée détection unique. Son autre comportement est cohérent avec Default.

Il est à noter qu'OnPush ne détecte que les références à Input. Les modifications d'attribut de l'objet d'entrée ne déclencheront pas la détection de valeur sale du composant actuel.

Bien que la stratégie OnPush améliore les performances, elle est également un point chaud pour les bugs. La solution consiste souvent à convertir l'entrée en forme immuable et à forcer la référence de l'entrée à changer.

Conseils

Liaison de données

Angular dispose de 3 méthodes légales de liaison de données, mais leurs performances est différent.

Lier les données directement

<ul>
 <li *ngFor="let item of arr">
  <span>Name {{item.name}}</span>
  <span>Classes {{item.classes}}</span><!-- Binding a data directly. -->
 </li>
</ul>

Dans la plupart des cas, c'est la meilleure façon de procéder.

Lier un résultat d'appel de fonction

<ul>
 <li *ngFor="let item of arr">
  <span>Name {{item.name}}</span>
  <span>Classes {{classes(item)}}</span><!-- Binding an attribute to a method. The classes would be called in every change detection cycle -->
 </li>
</ul>

Au cours de chaque processus de détection de valeur sale, l'équation des classes doit être appelée une fois. Imaginez que l'utilisateur fait défiler la page, que plusieurs macrotâches sont générées et que chaque macrotâche effectue au moins une vérification de valeur sale. S’il n’y a pas de besoins particuliers, cette méthode d’utilisation doit être évitée autant que possible.

Lier données+pipe

<ul>
 <li *ngFor="let item of instructorList">
  <span>Name {{item.name}}</span>
  <span>Classes {{item | classPipe}}</span><!-- Binding data with a pipe -->
 </li>
</ul>

C'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.

NgPour

多数情况下，NgFor应该伴随trackBy方程使用。否则，每次脏值检测过程中，NgFor会把列表里每一项都执行更新DOM操作。

@Component({
 selector: 'my-app',
 template: `
  <ul>
   <li *ngFor="let item of collection;trackBy: trackByFn">{{item.id}}</li>
  </ul>
  <button (click)="getItems()">Refresh items</button>
 `,
})
export class App {
 collection;
 constructor() {
  this.collection = [{id: 1}, {id: 2}, {id: 3}];
 }
  
 getItems() {
  this.collection = this.getItemsFromServer();
 }
  
 getItemsFromServer() {
  return [{id: 1}, {id: 2}, {id: 3}, {id: 4}];
 }
  
 trackByFn(index, item) {
  return index;
 }
}

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

Vue怎样实现beforeEnter钩子函数

怎样使用vue实现选项卡及选项卡切换效果

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!