使用Aurelia高效渲染大型數據表

Question

當使用Aurelia渲染大型數據表時，我正在努力提高性能。即使在中等大小的表格（20x20）的情況下，我也沒有低於200ms的Chrome瀏覽器，MS Edge需要約800ms，IE11需要約2s。 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> 

任何想法如何提高性能？

基於最初的建議，我試圖避免嵌套重複，但在我的情況下這是不可能的，因爲列和行都是動態的。

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

提到你的陣列就合二爲一。