最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Rendering large data tables efficiently with Aurelia - Stack Overflow

programmeradmin7浏览0评论

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.

Share Improve this question edited Oct 12, 2016 at 22:49 Jeremy Danyow 26.4k12 gold badges90 silver badges135 bronze badges asked Dec 2, 2015 at 16:39 reinholdkreinholdk 1236 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

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.

发布评论

评论列表(0)

  1. 暂无评论