Zusammenfassung der Methoden zur Leistungsoptimierung von Angular4

Dieses Mal werde ich Ihnen eine Zusammenfassung der Leistungsoptimierungsmethoden von Angular4 geben, welche Vorsichtsmaßnahmen für die Angular4-Leistungsoptimierung gelten, und im Folgenden sind praktische Fälle aufgeführt. Werfen wir einen Blick darauf.

Zusammenfassung

Die Erkennung schmutziger Werte in Angular 4 ist ein altes Thema, und das Verständnis dieses Modells ist die Grundlage für die Leistungsoptimierung von Angular. Deshalb werden wir heute über das Prinzip der Dirty-Value-Erkennung in Angular 4 sprechen und uns einige Tipps zur Leistungsoptimierung ansehen.

Einstiegspunkt – Zone.js

Angular 4 ist ein MVVM-Framework. Nachdem das Datenmodell (Model) in ein Ansichtsmodell (ViewModel) umgewandelt wurde, wird es an die Ansicht (View) gebunden und in eine mit bloßem Auge sichtbare Seite gerendert. Daher ist das Ermitteln des Zeitpunkts, zu dem sich das Datenmodell ändert, der Schlüssel zum Aktualisieren der Seite und zum Aufrufen der Erkennung schmutziger Werte.

Nach der Analyse stellten Ingenieure fest, dass Datenänderungen häufig durch asynchrone Ereignisse wie Makrotask und Mikrotask verursacht werden. Daher können Datenänderungen effektiv von der Quelle aus überwacht werden, indem alle asynchronen APIs im Browser neu geschrieben werden. Zone.js ist so ein Affenskript (Monkey Patch). Angular 4 verwendet eine benutzerdefinierte Zone (NgZone), die Angular benachrichtigt, dass möglicherweise Datenänderungen vorliegen und die Daten in der Ansicht aktualisiert werden müssen (Dirty-Value-Erkennung).

Erkennung fehlerhafter Werte (Änderungserkennung)

Das Grundprinzip der Erkennung fehlerhafter Werte besteht darin, den alten Wert zu speichern und bei der Erkennung den neuen Wert mit dem aktuellen zu vergleichen Moment mit dem alten Wert Wertvergleich. Wenn sie gleich sind, gibt es keine Änderung. Andernfalls wird eine Änderung erkannt und die Ansicht muss aktualisiert werden.

Angular 4 unterteilt die Seite in mehrere Komponenten, um einen Komponentenbaum zu bilden. Nach Eingabe der Dirty-Value-Erkennung wird die Erkennung von oben nach unten von der Stammkomponente aus durchgeführt. Angular verfügt über zwei Strategien: Default und OnPush. Sie werden auf der Komponente konfiguriert und bestimmen unterschiedliche Verhaltensweisen bei der Dirty-Value-Erkennung.

Default – Standardstrategie

ChangeDetectionStrategy.Default. Dies bedeutet auch, dass diese Komponente immer dann getestet wird, wenn ein Ereignis eintritt, das die Daten ändern könnte.

Der Vorgang der Schmutzwerterkennung kann grundsätzlich als die folgenden Schritte verstanden werden. 1) Aktualisieren Sie die an die Unterkomponente gebundenen Eigenschaften, 2) Rufen Sie die Hooks NgDoCheck und NgOnChangesLifecycle der Unterkomponente auf, 3) Aktualisieren Sie das eigene DOM, 4) Erkennen Sie den schmutzigen Wert der Unterkomponente. Dies ist eine rekursive Gleichung, die von der Wurzelkomponente ausgeht.

// 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));
}

Wir Entwickler werden der Reihenfolge der DOM-Updates und der Aufrufreihenfolge von NgDoCheck und NgOnChanges große Aufmerksamkeit schenken. Es ist zu finden:

1. DOM-Updates sind tiefenorientiert

2. NgDoCheck und NgOnChanges sind es nicht (und sind auch nicht tiefenorientiert)

OnPush – Einzelerkennungsstrategie

ChangeDetectionStrategy.OnPush. Diese Komponente wird nur erkannt, wenn sich die Eingabeeigenschaften ändern (OnPush). Wenn sich die Eingabe nicht ändert, wird sie daher nur während der Initialisierung erkannt, was auch als Einzelerkennung bezeichnet wird. Sein sonstiges Verhalten stimmt mit Default überein.

Es ist zu beachten, dass OnPush nur Verweise auf Input erkennt. Attributänderungen des Eingabeobjekts lösen nicht die Erkennung fehlerhafter Werte der aktuellen Komponente aus.

Obwohl die OnPush-Strategie die Leistung verbessert, ist sie auch ein Hotspot für Fehler. Die Lösung besteht häufig darin, die Eingabe in eine unveränderliche Form umzuwandeln und eine Änderung der Referenz der Eingabe zu erzwingen.

Tipps

Datenbindung

Angular verfügt über 3 legale Datenbindungsmethoden, aber deren Leistung ist anders.

Daten direkt binden

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

In den meisten Fällen ist dies die beste Vorgehensweise.

Ein Funktionsaufrufergebnis binden

<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>

Während jedes Dirty-Value-Erkennungsprozesses muss die Klassengleichung einmal aufgerufen werden. Stellen Sie sich vor, dass der Benutzer durch die Seite scrollt, mehrere Makrotasks generiert werden und jede Makrotask mindestens eine Überprüfung auf schmutzige Werte durchführt. Wenn keine besonderen Bedürfnisse bestehen, sollte diese Verwendungsart weitestgehend vermieden werden.

Daten + Pipe binden

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

Es ähnelt der Bindungsfunktion jedes Mal, wenn die Klasse „Pipe“ zur Erkennung schmutziger Werte aufgerufen wird. Allerdings hat Angular die Pipe optimiert und Caching hinzugefügt. Wenn das Element beim letzten Mal gleich ist, wird das Ergebnis direkt zurückgegeben.

NgFor

多数情况下，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;
 }
}

Reference

1. He who thinks change detection is depth-first and he who thinks it's breadth-first are both usually right

2. Angular Runtime Performance Guide

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

推荐阅读：

vue-cli2.9.3使用步骤详解

vue webpack使用案例详解

Das obige ist der detaillierte Inhalt vonZusammenfassung der Methoden zur Leistungsoptimierung von Angular4. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!