2015年12月13日编辑

Question

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

即使在中等大小的桌子（20x20）的情况下，我的Chrome也不会低于200ms，MS Edge需要大约800ms而IE11大约需要2s。如果要添加（虚拟）滚动，200ms也是一个问题。处理时间随着每个表格单元的绑定数量而增加。我已经整理了一个（example）来绑定＆＃39;＆＃39;＆＃39; class＆＃39;，当然还有单元格内容。

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

2015年12月13日编辑

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

在这里演示：http://jdanyow.github.io/aurelia-dbmonster/

Answer 2

如上所述，只需将数组合并为一个。

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

2 个答案:

2015年12月13日编辑