0

I'm working on a project that requires a table to be dynamically constructed from an array of header objects:

[{ field: "name", show: true, title: "Name"},
 { field: "id", show: true, title: "ID"},
 { field: "time", show: true, title: "Time"}]

and an array of data objects that is updated at an interval:

[{ name: "Abc", id: 123, time: "300" }, 
 { name: "Def", id: 456, time: "10" }]

My template looks something like this:

<table class="table">
  <thead>
    <th ng-repeat="header in cols">
      {{::header.title}}
    </th>
  </thead>
  <tbody>
    <tr ng-repeat="row in visibleData">
      <td ng-repeat="col in cols">
        {{::row[col.field]}}
      </td>
    </tr>
  </tbody>
</table>

Please note that this is a simplified version but it holds the important bits.

As of now, rendering a table with 10 cols and 20 rows takes around 200ms (which creates a noticeable lag in scrolling and other page animations).

As you can see, I've tried to use one-time biding but that hasn't improved the performance noticeably. Another thing I've tried was to 'track by' row.id, but this caused the data to stop updating altogether (The initial DOM object is reused even though some columns have changed).

So my question is, what measures should I take in order to optimize this configuration?

Any help would be greatly appreciated. Thanks :)

no_joke
  • 56
  • 5
  • 1
    http://stackoverflow.com/questions/17348058/how-to-improve-performance-of-ngrepeat-over-a-huge-dataset-angular-js – potatopeelings Nov 09 '15 at 12:12
  • use ::visibleData and ::cols in all ng-repeats too – YOU Nov 09 '15 at 14:22
  • @potatopeelings Thanks for the link. I'll be sure to try everything suggested. – no_joke Nov 09 '15 at 14:38
  • @YOU since I need the binding to visibleData in order to keep updating the table data I can't do that. I did change the cols to bind once. – no_joke Nov 09 '15 at 14:39
  • is there custom directives inside those ng-repeats? – YOU Nov 09 '15 at 14:51
  • @YOU I do, and you're right, they are huge performance bottlenecks (I'm getting almost 3 times better performance without them. Is there a way to optimize them somehow? I don't think I can remove them without sacrificing the main features of the table (configurable columns, status indicators, parsed dates). But even without the directives, I'm still rendering slow enough for a stutter to be noticed in the UI. – no_joke Nov 10 '15 at 07:36
  • well, Its depend on how complex your directive is. If controllers attach to directives, thats one reason that being slow. may be you can post those directives, so someone could come up with better idea. may be in seperate thread. – YOU Nov 11 '15 at 04:48

0 Answers0