Eine kurze Diskussion über Tipps zur Optimierung der Bindungsleistung (Dirty Checking) in Angular

In diesem Artikel werden Ihnen AngularTechniken zur Leistungsoptimierung beim Binden (Dirty Checking) vorgestellt. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.

1. Warum sollten wir optimieren

Zwei-Wege-Bindung ist ein zweischneidiges Schwert, das die Entwicklungseffizienz verbessert, aber auch die Leistung opfert. Natürlich können mit der Verbesserung der Hardwareleistung und der Verbesserung der Angular-eigenen Leistung bei Anwendungen allgemeiner (kleiner und mittlerer) Komplexität Leistungsprobleme ignoriert werden. Für spezielle Szenarien oder komplexe Seiten müssen wir uns jedoch separat mit Datenbindungsproblemen befassen, da es sonst zu Verzögerungen kommt und die Benutzererfahrung beeinträchtigt. [Verwandte Tutorial-Empfehlungen: „Angular-Tutorial“]

2. In Bezug auf Programmiergewohnheiten

Einige der üblichen Tipps und Gewohnheiten können die Leistung der Angular-Bindung verbessern.

2.1. NgForOf, fügen Sie trackBy hinzu, um die Leistung zu verbessern.

trackBy definiert, wie Änderungen in iterierbaren Elementen verfolgt werden. Wenn Elemente zum Iterator hinzugefügt, verschoben oder daraus entfernt werden, muss die Direktive den entsprechenden DOM-Knoten neu rendern. Um die Abwanderung im DOM zu minimieren, werden nur Knoten neu gerendert, die sich geändert haben.

Standardmäßig gehen Änderungsdetektoren davon aus, dass Objektinstanzen Iterables identifizieren. Wenn diese Funktion bereitgestellt wird, verwendet die Direktive das Ergebnis des Aufrufs dieser Funktion, um den Elementknoten zu identifizieren, und nicht die Identität des Objekts selbst.

2.2. Drei Möglichkeiten der Angular-Datenbindung

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

• Direkte Bindung: In den meisten Fällen ist dies die beste Methode.

• Das Ergebnis des Bindungsmethodenaufrufs: Während jedes Dirty-Value-Erkennungsprozesses muss die Klassengleichung einmal aufgerufen werden. Wenn keine besonderen Bedürfnisse bestehen, sollte diese Verwendungsart weitestgehend vermieden werden.

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

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

2.3. Sofern nicht erforderlich, wird eine Einwegbindung verwendet, um die Anzahl der Überwachungswerte zu reduzieren.

Für allgemeine Daten müssen diese nur dem Benutzer angezeigt werden und müssen nicht angezeigt werden geändert. Dann verwenden Sie für diesen Teil der Daten einfach eine unidirektionale Bindung (ts->html). Das reicht nicht aus, aber Angular berücksichtigt auch diese und stellt viele Methoden bereit.
Angular-Vergleich AngularJS ändert die Erkennung von der ursprünglichen Zwei-Wege-Erkennung (Eltern->Kind, Kind->Eltern) in eine einseitige Erkennung (Eltern->Kind). Daher wird jede Änderungserkennung deterministisch konvergieren.

Wenn Angular eine Komponente definiert, können Sie ein Konfigurationselement zur Änderungserkennung als

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

übergeben. Die Onpush-Strategie bestimmt nur, ob sich die Eingabereferenz (wenn es sich um ein Objekt handelt) geändert hat, um zu bestimmen, ob eine Dirty-Prüfung durchgeführt werden soll. Daher können wir die Onpush-Strategie verwenden, um den Aufwand für die Änderungserkennung zu reduzieren.

4. Verwenden Sie ngzone-runOutside Angular-Optimierung

Angular verlässt sich auf NgZone, um asynchrone Vorgänge abzuhören und Änderungserkennung vom Stamm aus durchzuführen. Mit anderen Worten: Jeder addEventListener in unserem Code löst einen Dirty Check aus. Aber wenn wir ganz klar sind, werden einige der Dinge, die addEventListener ausführen muss, die Datenergebnisse nicht beeinflussen (oder können ignoriert werden), da sonst eine fehlerhafte Prüfung ausgelöst wird. Überwachen Sie beispielsweise das Scrollen, überwachen Sie Mausereignisse usw.

In diesem Fall können wir runOutsideAngular von Zone verwenden, um zu verhindern, dass diese Ereignisse Dirty Checks auslösen.

changeDetection: ChangeDetectionStrategy.OnPush | ChangeDetectionStrategy.Default;

5. Steuern Sie den Dirty Check ChangeDetectorRef manuell. Die ChangeDetectorRef-Instanz von Angular bietet eine Methode zum Binden oder Lösen des Dirty Checks einer Komponente.

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

6. Zusammenfassung

Einige kleine Gewohnheiten im täglichen Leben können die Leistung von Angular verbessern;

Für komplexe Anwendungen oder wenn Verzögerungen auftreten, haben wir auch Lösungen!

Weitere Kenntnisse zum Thema Programmierung finden Sie unter:
• Programmierunterricht

  ! !

Das obige ist der detaillierte Inhalt vonEine kurze Diskussion über Tipps zur Optimierung der Bindungsleistung (Dirty Checking) in Angular. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!