javascript - Angular ng-class performance issue when too many elements in DOM

Question

I have been working on a complex angular page which has been causing performance issue. To highlight the problem I have created a fiddle http://jsfiddle.net/4ex2xgL1/3/ here.

Essentially the performance issue is being caused by ng-class statement which has a function in it.

<span class="done-{{todo.done}}" ng-class="myfunction()">{{todo.text}}</span>

The span is in an ng-repeat. On running the fiddle one can see that ng-class gets executed several times when the page loads and on each key up it gets called as many time as number of items in the TODO list.

This is a lot simpler case, in my case I have 780 items on my page and the function ends up being evaluated aroung 3000 times!

One of the solution we saw is to break up the scope but it will cause almost a rewrite of my app.

We also tried https://github.com/Pasvaz/bindonce but it doesn't seem to be working with highly dynamic content.

Any thoughts?

Answer 1

I built a tree with https://github.com/JimLiu/angular-ui-tree with almost 500 items to render, with quite a lot of listeners. It takes 5 seconds to render. Bindonce won't work there.

The only solution out there is make ng-repeat do less. Keep the list small with a pagination, search or anything. Its the best shot as far as I know.

Well here are my recommendations

1. use ng-change on the checkbox to manipulate dom or anything rather using ng-class, it will improve your performance drastically.

   <li ng-repeat="todo in todos track by todo.id"> <input type="checkbox" ng-model="todo.done" ng-change="myfunction()"> <span class="done-{{todo.done}}">{{todo.text}}</span> </li>

   http://jsfiddle.net/4ex2xgL1/3/

2. use track by in ng-repeat if you have ids, more here http://www.codelord.net/2014/04/15/improving-ng-repeat-performance-with-track-by/

3. dont show 780 items in a list. Use a searchbox to show some 100 or 50 or you know better

4. quick-ng-repeat not used yet, try testing it https://github.com/allaud/quick-ng-repeat

finally a few good http://tech.small-improvements.com/2013/09/10/angularjs-performance-with-large-lists/