admin管理员组

文章数量:1327097

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

Share Improve this question Follow edited Oct 12, 2016 at 22:49 Jeremy Danyow 26.4k1212 gold badges9090 silver badges135135 bronze badges asked Dec 2, 2015 at 16:39 reinholdkreinholdk 12366 bronze badges 2

• 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

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 9

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.

本文标签： javascriptRendering large data tables efficiently with AureliaStack Overflow