当使用Aurelia渲染大型数据表时，我正在努力提高性能。即使在中等大小的表格（20x20）的情况下，我也没有低于200ms的Chrome浏览器，MS Edge需要约800ms，IE11需要约2s。 200ms也是一个问题，如果你想添加（虚拟）滚动。处理时间随着每个表格单元的绑定数量而增加。我编写了一个（example），它绑定'css'，'class'，当然还有单元格内容。使用Aurelia高效渲染大型数据表

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

任何想法如何提高性能？

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

来源

2015-12-02 reinholdk

[ui-virtualization]（http://aurelia.io/ui-virtualization）？ –

问题是关于渲染可见表格单元的优化。如果有许多不可见的行，Aurelia ui-virtualization可以提供帮助。 – reinholdk

ohhhhhhhhhhh ... –

伟大的问题，这是我们最近一直关注的重点。

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

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

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

来源

2015-12-02 17:19:57

谢谢，我们期待着改变。但是，使用oneTime，当数据集（列）更改时，该表不会再重绘。我如何触发重新绘制视图？你只需在你的博客中阅读关于“信号”绑定行为的信息：http：//www.danyow.net/aurelia-binding-behaviors/这可能对此有所帮助，但信号似乎不会从上述性能修复中受益。 – reinholdk

whoa，重复表达式中记录的“＆oneTime”在哪里？相当漂亮。 –

-2

提到你的阵列就合二为一。

来源

2015-12-03 12:57:57

这不提供问题的答案。要批评或要求作者澄清，请在其帖子下方留言。 - [来自评论]（/评论/低质量帖/ 10428922） –

@MikeB我很确定它直接回答他的问题。它确切地告诉他该做什么。 –

感谢您的反馈，但我觉得提供的答案不符合这里提到的指导方针：http://stackoverflow.com/help/how-to-answer –

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

回答

2015年12月13日编辑

相关问题