使用 Aurelia 高效渲染大型数据表

Question

我在使用 Aurelia 渲染大数据 table 时遇到性能问题。

即使 tables (20x20) 大小适中，我的 Chrome 也不会低于 200 毫秒，MS Edge 需要约 800 毫秒，而 IE11 需要约 2 秒。如果您想添加（虚拟）滚动，200 毫秒也是一个问题。处理时间随着每个 table 单元格的绑定数量而增加。我已经将绑定 'css'、'class' 的 (example) 放在一起，当然还有单元格内容。

<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>

有什么改进性能的想法吗？

根据最初的建议，我试图避免嵌套重复，但在我的情况下这是不可能的，因为列和行都是动态的。

Answer 1

问得好，这是我们最近非常关注的问题。

首先，当涉及大量数据时，避免嵌套重复。我们正在努力改进此方案的性能，这将通过展开模板显着提高此方案的性能，但尚未准备好发布。

其次，尽可能使用一次性绑定。这将消除任何属性观察和数组变异观察开销。

<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 编辑

即将发布的版本有两项更改，可将大型网格的渲染时间缩短一半甚至更少。其中一项更改提高了单向绑定（迄今为止最常用的绑定模式）的效率，另一项更改将一些绑定工作推迟到初始渲染完成之后。这将使使用 oneTime 和 oneWay 在初始渲染方面一样快。有关这些改进的更多信息，请点击此处：http://blog.durandal.io/2015/12/04/aurelia-repaint-performance-rules/

此处演示：http://jdanyow.github.io/aurelia-dbmonster/

Answer 2

只需将您的数组合并为一个即可。

使用 Aurelia 高效渲染大型数据表

Rendering large data tables efficiently with Aurelia

javascript

performance

aurelia

12/13/2015 编辑