Angular Performance - Filter vs Function Expression

Question

I have a performance question for Angular 1.x. Is there any performance benefits to use function expressions vs filters to get values based on keys? Let me explain with examples.

I currently have a complex angular application with a number of filters used to get values based of an objects key. I have a lot of key/ID references in my data so I use a filter to get field values based of the key.

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

The custom filter would then do a async call (to DB) to get the object name I specify based on the key (ID123) and return the field I specify (instead of just showing the key).

I'm currently in the process of doing some performance clean up and I've read a lot about avoiding filters since they are a hit on performance. One thing I'm doing is using one-time bindings {{::ID123 | getField:'object':'field'}} but in some scenarios I can't do that (since I need the value to update).

I was then looking at function expressions instead of custom filters, e.g. {{getField(ID123,'object','field')}}. But I'm not sure if it would get any performance benefts.

You can see my plunker example where I compare the two.

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

Would there be any performance benefits? Also is there a way to test or benchmark the difference between the two?

Thanks

Answer 1

Short answer: filter is better provided it's idempotent (i.e. the same input always returns the same output) and the input is not an object.

---

Long answer:

If you use a function, it will be called in each digest cycle, because Angular has to check that the output is the same. That means it will be called several times before the displayed data 'settles'.

If you use a filter and the input is not an object, it will be executed only if the input has changed, since Angular assumes that filters are idempotent unless their $stateful property is set to true. Objects are an exception to this, because it's costly to check if deep properties of objects are changed, so Angular executes the filter in every digest cycle, making it the same as a function.

Be careful with creating custom filters that are not idempotent, Angular will assume they are and not update the displayed data properly. If you must create one, mark them as $stateful.

---

Sources

This question is related and pointed me in the right direction:
Custom filter vs filter function in controller performance comparison

And this is the Angular documentation for filters (sections "When filters are executed" and "Stateful filters"):
https://docs.angularjs.org/guide/filter