Angular Performance - Filter vs Funktion Ausdruck

Question

Ich habe eine Frage zur Performance für Angular 1.x. Gibt es Leistungsvorteile bei der Verwendung von Funktionsausdrücken gegenüber Filtern, um Werte basierend auf Schlüsseln zu erhalten? Lass mich das mit Beispielen erklären.

Ich habe derzeit eine komplexe Winkelanwendung mit einer Anzahl von Filtern, die verwendet werden, um Werte basierend auf einem Objektschlüssel zu erhalten. Ich habe viele Schlüssel-/ID-Referenzen in meinen Daten, daher verwende ich einen Filter, um Feldwerte basierend auf dem Schlüssel zu erhalten.

E.g. {{ ID123 | getField:'object':'field'}} 

Der benutzerdefinierte Filter würde dann einen asynchronen Aufruf tun (DB) die Objektname mich auf dem Schlüssel angeben, erhält basierend (ID123) und zurück, das Feld I (statt nur zeigt den Schlüssel) angeben.

Ich bin gerade dabei, etwas Leistung sauber zu machen, und ich habe viel über das Vermeiden von Filtern gelesen, da sie ein Schlag auf Leistung sind. Eine Sache, die ich mache, ist die Verwendung einmaliger Bindungen {{::ID123 | getField:'object':'field'}}, aber in einigen Szenarien kann ich das nicht tun (da ich den Wert zum Aktualisieren benötige).

Ich sah dann Funktionsausdrücke anstelle von benutzerdefinierten Filtern, z. {{getField(ID123,'object','field')}}. Aber ich bin mir nicht sicher, ob es irgendwelche Leistungsvorteile bekommen würde.

Sie können mein Beispiel sehen, wo ich die beiden vergleiche.

https://plnkr.co/edit/hlL2LSOGjq5HsImUyqyu?p=preview

Würde es irgendwelche Performance-Vorteile sein? Gibt es auch eine Möglichkeit, den Unterschied zwischen den beiden zu testen oder zu messen?

Dank

Answer 1

Kurze Antwort: Filter besser es ist idempotent (das heißt die gleiche Eingabe immer den gleichen Ausgang) und der Eingang zur Verfügung gestellt wird, ist kein Objekt.

---

Lange Antwort:

Wenn Sie eine Funktion verwenden, wird es in jedem verdauen Zyklus genannt werden, weil Eckige zu prüfen hat, dass die Ausgabe gleich ist. Das bedeutet, dass es mehrmals aufgerufen wird, bevor die angezeigten Daten "abgerechnet" werden.

Wenn Sie einen Filter verwenden, und der Eingang ist kein Objekt, es wird nur ausgeführt, wenn der Eingang geändert hat, seit Eckige geht davon aus, dass die Filter idempotent sind, wenn ihre $stateful Eigenschaft auf true gesetzt. Objekte stellen eine Ausnahme dar, da es teuer ist, zu überprüfen, ob sich die Tiefeneigenschaften von Objekten ändern. Daher führt Angular den Filter in jedem Digest-Zyklus aus und macht ihn so zu einer Funktion.

Seien Sie vorsichtig beim Erstellen benutzerdefinierter Filter, die nicht idempotent sind, Angular wird davon ausgehen, dass sie sind und die angezeigten Daten nicht ordnungsgemäß aktualisieren. Wenn Sie eine erstellen müssen, markieren Sie sie als $stateful.

---

Quellen

Diese Frage bezieht und wies mich in die richtige Richtung:
Custom filter vs filter function in controller performance comparison

Und dies ist die Winkel Dokumentation für Filter (Abschnitte „Wenn Filter ausgeführt“ und "Stateful Filter"):
https://docs.angularjs.org/guide/filter