当使用Aurelia渲染大数据表时,我正在努力处理性能.
即使在中等大小的桌子(20×20)的情况下,我的Chrome不会低于200ms,MS Edge需要大约800ms,IE11需要〜2秒. 200ms也是一个问题,如果你想添加(虚拟)滚动.处理时间随每个表格单元格的绑定数量而增加.我已经组合了一个(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>
任何想法如何可以提高性能？
基于初始建议,我试图避免嵌套的重复,但是在我的情况下这是不可能的,因为列和行都是动态的.
解决方法
很好的问题,这是我们最近一直专注的.
首先,当涉及到大量数据时,避免嵌套重复.我们正在为这种情况进行性能改进,这将通过展开模板来显着改善这种情况,但尚未准备发布.
其次,尽可能使用一次性绑定.这将消除任何属性观察和阵列突变观察开销.
<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/
