I'm struggling with performance when rendering large data tables using Aurelia.

Even in case of moderate size tables (20x20) I'm not getting below 200ms for Chrome, MS Edge takes ~800ms and IE11 takes ~2s. The 200ms are an issue as well, if you want to add (virtual) scrolling. Processing time increases with the number of bindings per table cell. I have put together an (example) that binds 'css', 'class', and of course the cell content.

<table class="table">
  <tbody>
    <tr repeat.for="row of rows">
      <td repeat.for="column of columns" css.bind="getCellStyle(column, $parent.$first)" class.bind="getCellClasses(column, row)">
        <template replaceable part="cell-template">
          <span>${getCellText(column, row)}</span>
        </template>
      </td>
    </tr>
  </tbody>
</table>

Any ideas how I could improve the performance?

Based on initial proposals I tried to avoid the nested repeats but this is not possible in my case since both, columns and rows, are dynamic.

I'm struggling with performance when rendering large data tables using Aurelia.

Even in case of moderate size tables (20x20) I'm not getting below 200ms for Chrome, MS Edge takes ~800ms and IE11 takes ~2s. The 200ms are an issue as well, if you want to add (virtual) scrolling. Processing time increases with the number of bindings per table cell. I have put together an (example) that binds 'css', 'class', and of course the cell content.

<table class="table">
  <tbody>
    <tr repeat.for="row of rows">
      <td repeat.for="column of columns" css.bind="getCellStyle(column, $parent.$first)" class.bind="getCellClasses(column, row)">
        <template replaceable part="cell-template">
          <span>${getCellText(column, row)}</span>
        </template>
      </td>
    </tr>
  </tbody>
</table>

Any ideas how I could improve the performance?

Based on initial proposals I tried to avoid the nested repeats but this is not possible in my case since both, columns and rows, are dynamic.

• javascript
• performance
• aurelia

• ui-virtualization? – Eliran Malka Commented Apr 17, 2016 at 20:50
• The question was about optimization for rendering visible table cells. Aurelia ui-virtualization helps, if there are many invisible rows. – reinholdk Commented Apr 19, 2016 at 7:10

2 Answers 2

Great question, this is something we've been heavily focused on recently.

First, avoid nesting repeats when there's a ton of data involved. We're working on a performance improvement for this scenario that will improve perf dramatically for this scenario by unrolling the templates but it's not ready for release yet.

Second, use one-time bindings wherever possible. This will eliminate any property observation and array mutation observation overhead.

<table class="table">
  <tbody>
    <tr repeat.for="row of rows & oneTime">
      <td repeat.for="column of columns & oneTime" css.one-time="getCellStyle(column, $parent.$first)" class.one-time="getCellClasses(column, row)">
        <span>${getCellText(column, row) & oneTime}</span>
      </td>
    </tr>
  </tbody>
</table>

12/13/2015 EDIT

The uping release has two changes that will cut the render time of large grids in half or even less. One of the changes improves the efficiency of one-way bindings (by far the most monly used binding mode) and the other defers some binding work until after the initial rendering is done. This will make using oneTime and oneWay just as fast in terms of initial render. More info on these improvements here: http://blog.durandal.io/2015/12/04/aurelia-repaint-performance-rules/

Demo here: http://jdanyow.github.io/aurelia-dbmonster/

Just bine your arrays into one as mentioned.