optimize angular filter performance

Question

I am filtering a fairly small dataset but there is still some performance issues (UI thread freezing when filter is not concise).

    <input type="text" ng-model="vm.user" />
    <table class="tbl" ng-show="vm.user.length > 2">
        <tbody ng-repeat="p in vm.permissions | filter: {UserName: vm.user}:false">

the issue is only when there are a lot of records, so I've attempted to improve performance by hiding the whole thing when there are less than 3 characters entered in search.

unfortunately, even when the data-set is hidden it appears that angular is manipulating the dom (UI freezing as I type into the filter).

Is there a way to make it not do anything when there are less characters, and/or improve performance in other ways?

Not sure if this will address your issue, but you'd want to use ng-if instead of ng-show since it would actually remove the element from the DOM as opposed to just hide it with CSS — New Dev
– New Dev, Commented Nov 11, 2014 at 23:32
yep, that did it. I still think it's odd that the DOM gets manipulated for hidden elements. — Sonic Soul
– Sonic Soul, Commented Nov 13, 2014 at 17:16

GregL · Accepted Answer · 2014-11-12 00:58:12Z

I would make 3 suggestions to improve performance:

As New Dev said, use ng-if instead of ng-show to remove the whole node from the DOM, which will mean that no processing of directives on the removed nodes will occur at all. I tend to prefer ng-if in 99% of scenarios now, unless I know that the visibility of the option will toggle a lot and therefore modifying the class of an existing node is quicker than inserting and removing the same node over and over again.
Use a track by in your ng-repeat expression. This means that Angular will re-use DOM nodes for items in the array that have the same matching value. e.g. if you have track by p.UserName (so long as UserName is 100% unique), if it encounters a record with the same username, it will use the same DOM node as before, rather than recreating a new one.
Use ng-model-options to have a debounce on the filter input so that if a user is typing fast, not every keystroke will trigger a new filtering operation. You may need to experiment to find the correct timeout value that works for you in your target browsers.

I have created an example Plunkr that shows these techniques in action. When I tried it with 100,000 records in the list of "permissions" (really just dummy users in the example), it was still very fast in Chrome. Didn't test in other browsers, though.

Collectives™ on Stack Overflow

optimize angular filter performance

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related