So betreiben Sie die Angular4-Leistungsoptimierung

Dieses Mal zeige ich Ihnen, wie Sie die Angular4-Leistungsoptimierung betreiben. 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)

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.

Default – Standardstrategie

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

Lifecycle

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

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

Attributänderungen des Eingabeobjekts

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

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>

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>

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>

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

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

推荐阅读：

Vue怎样实现beforeEnter钩子函数

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

Das obige ist der detaillierte Inhalt vonSo betreiben Sie die Angular4-Leistungsoptimierung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!