Angular performance (for table) is horrible

[Eddie]

Simplest example: http://jsfiddle.net/ADukg/210/

takes about 90 milliseconds to render 100 rows x 6 columns on Chrome.

After adding a checkbox column (via custom directive), I am getting around 220ms per 100 row (6 total columns).

This is what it looks like:

 <tr ng-repeat="user in tableState().currentRows" >

                            <td><input type="checkbox" mi-select-one="user.id"></td>

                            <td>{{user.id}}</td>

                            <td>{{user.displayName}}</td>

                            <td>{{user.emailAddress}}</td>

                            <td>{{user.distinguishedName}}</td>

                            <td>{{user.accountSource}}</td>

</tr>

Is there anything I can do? Or is this pretty much it?

(If I tried to setup column reordering via a nested <td ng-repeat="col in columns"> then I get up to 700ms for 100 rows...

[Robert B. Weeks]

Hello -

Have you tried *not* using tables? Tables are notorious for rendering issues - we use a pretty big angular component that audits our appliances (see screen) that allows the ability to adjust the results - this one showing 200 at a time (and polls) - but we don't allow any tables at all in the views for this reason in particular. Utilize css grids or something and you should see a big difference I would think.

[Eddie]

Ok, after a lot of debug, looks like the issue is how $digest works. $rootScope.$digest get's called by both ng-click and $http, then my own directive watchers triggers, so $rootScope.$digest actually get's called multiple times. Looks like I need to rationalize my directive's watchers so $rootScope.$digest() happens at most 2 times...

On Thursday, May 31, 2012 12:37:03 PM UTC-7, Robert Weeks wrote:

Hello -

Have you tried *not* using tables? Tables are notorious for rendering issues - we use a pretty big angular component that audits our appliances (see screen) that allows the ability to adjust the results - this one showing 200 at a time (and polls) - but we don't allow any tables at all in the views for this reason in particular. Utilize css grids or something and you should see a big difference I would think.

--
Robert B. Weeks

[Vojta Jína]

One note, you keep creating new objects, so ng-repeat can't optimize it.

If you have a stable model, it's gonna be faster, as it won't have to recreate whole DOM structure.

V.

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To view this discussion on the web visit https://groups.google.com/d/msg/angular/-/fVcr75SbbYIJ.
To post to this group, send email to ang...@googlegroups.com.
To unsubscribe from this group, send email to angular+u...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/angular?hl=en.