So optimieren Sie Angular-Code

Dieses Mal zeige ich Ihnen, wie Sie Angular-Code optimieren und welche Vorsichtsmaßnahmen für die Optimierung von Angular-Code gelten. Das Folgende ist ein praktischer Fall, schauen wir uns das an.

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) konvertiert 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 angepasste Zone (NgZone), die Angular benachrichtigt, dass es möglicherweise zu Datenänderungen kommt 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 NgDoCheck- und NgOnChanges-Lebenszyklus-Hooks 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. Eigenschaftsänderungen des Eingabeobjekts lösen keine 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 oft darin, die Eingabe in eine unveränderliche Form umzuwandeln und eine Änderung der Referenz der Eingabe zu erzwingen.

Tipps

Datenbindung

Angular bietet drei legale Möglichkeiten der Datenbindung, deren Leistung ist jedoch nicht gleich.

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

In den meisten Fällen sollte NgFor mit der trackBy-Gleichung verwendet werden. Andernfalls aktualisiert NgFor das DOM für jedes Element in der Liste während jedes Prozesses zur Erkennung schmutziger Werte.

@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;
 }
}

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

So trennen Sie Konfigurationsdaten vom Code

So erkennen Sie Attribute in der Webentwicklung

Das obige ist der detaillierte Inhalt vonSo optimieren Sie Angular-Code. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!