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

Question

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

即使在中等大小的表格 (20x20) 的情况下，Chrome 的时间也不会低于 200 毫秒，MS Edge 需要约 800 毫秒，而 IE11 需要约 2 秒。如果您想添加（虚拟）滚动，那么 200 毫秒也是一个问题。处理时间随着每个表格单元格的绑定数量而增加。我已经组合了一个 (example)，它绑定了“css”、“class”，当然还有单元格内容。

<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

如前所述，只需将您的数组组合成一个即可。