AngularJS ng-repeat performance

Question

I use AngularJS ng-repeat in order to view my table elements (it shouldn't be used very often - I know - but I don't know how to do it in an other way)

Here my example how I'am showing the containerObjects in table:

http://jsfiddle.net/NfPcH/10390/

ng-repeat=...

I have a lot containedObjects (with start, end and containerType) (around 600 per page) which are shown in table. It took about 3 Seconds to show the view.

My question now would be, if something can be improved in order to improve performance. Is there a possibility to replace/change ng-repeat to decrease loading time.

Thanks a lot!

[EDIT]

I also have this function invocation but I have no idea how to prevent the function invocation. Does have anyone any idea how I could improve this? Thanks a lot !

ng-repeat="serviceSchedule in getServiceScheduler(institutionUserConnection)">

function getServiceScheduler(institutionUserConnection) {
        if(institutionUserConnection.scheduler != null) {
            var serviceSchedules = institutionUserConnection.scheduler.serviceSchedules;
            return serviceSchedules[Object.keys(serviceSchedules)[0]];          
        } else {
            return null;
        }
    }

institutionUserConnection in getCurrentDateScheduler() << this is always bad idead for big arrays. Refer variable, not method. — Petr Averyanov
– Petr Averyanov, Commented Sep 16, 2015 at 14:00
why so many function calls in view? those are expensive. Do some pre-processing of data if needed — charlietfl
– charlietfl, Commented Sep 16, 2015 at 14:30
I have edit my post - does anyone any idea how to improve this. Thanks a lot! — quma
– quma, Commented Sep 16, 2015 at 15:33

Umut Benzer · Accepted Answer · 2015-09-17 07:14:16Z

Improvement #1:

As @Petr Averyanov suggested, use a variable instead of a function call.

instead of: ng-repeat="serviceSchedule in getServiceScheduler(institutionUserConnection)"

change your logic to: ng-repeat="serviceSchedule in preCalculatedServicesObjectInScope"

To do this, you need other logic changes in controller, you have to manage when the result of getServiceScheduler(institutionUserConnection)" actually changes yourself but it WILL increase the performance.

Improvement #2:

Use variables that are evaluated once if values of rows never change once they are rendered. This will reduce watchers drastically and help you improve overall performance:

```html
<tr ng-repeat="institutionUserConnection in someScopeVariable">
  <td>{{ ::institutionUserConnection.user.firstname }} {{ ::institutionUserConnection.user.lastname }}</td>
</tr>```

Improvement #3:

Use track by statement in ng-repeat. Angular.js normally checks/tries to identify which object is which using a special hash function $id in ng-repeat. However, you naturally have an identifier for each object in array (and you should) you can make ng-repeat use this instead of creating it's own id. For example:

<tr ng-repeat="x in someScopeVariable track by x.id">

Improvement #4: (getting hackier here)

Whatever you do, since your array is large, you may not be able to increase the performance enough. Then you should ask this question, do people really see 600 items in one look? No, it won't fit to page. So, you can chop the part that doesn't fit the page, reducing DOM elements to be rendered at once. To do that you can use limitTo filter:

<tr ng-repeat="x in someScopeVariable | limitTo: visual.limitValue">

You can make visual.limitValue a reasonable count such as 10 in the beginning and you can increase it on table's scroll to increase it when use is about to reach the bottom, resulting partial appending of DOM to page. However this hack requires both style and code changes in the page.

Improvement #5: (hackiest one, but it works)

If dimensions of each row is constant, using scroll position and dimension of rows, you can calculate which rows should be visible and you can render them only. I've written a directive for practice, named it uber-repeat and tested it with 60.000 rows and performance was amazing, even in mobile phones!

I think there is a project uses somewhat same approach here: angular-vs-repeat

Thanks a lot for your answer - it was very helpful! I would have one last question - is there an example how I can can use visual.limitValue if I scroll down the browser view (my table is not embedded). Thanks a lot!
track by $index did wonders for my use case (only 500 objects or so, but already causing an unacceptable lag).

Collectives™ on Stack Overflow

AngularJS ng-repeat performance

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related