Aureliaで大規模なデータテーブルを効率的にレンダリングする

Question

Aureliaを使用して大規模なデータテーブルをレンダリングすると、パフォーマンスが低下します。

中規模サイズのテーブル（20x20）の場合でも、Chromeの場合は200ms未満にはならないので、MS Edgeは約800ms、IE11は約2sかかります。 （仮想）スクロールを追加したい場合は、200msも問題になります。処理時間は、表セルあたりのバインディング数とともに増加します。私は、 'css'、 'class'、そしてもちろんセルの内容をバインドする（example）をまとめました。

<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

大きな質問ですが、これは最近注目されています。

最初に、大量のデータが含まれている場合は、繰り返しのネストは避けてください。このシナリオでは、このシナリオではテンプレートを展開することでパフォーマンスが大幅に向上しますが、まだリリースする準備はできていません。

第2に、可能な限り、一度限りのバインディングを使用してください。これにより、プロパティーの観測と配列の突然変異の観察オーバーヘッドがなくなります。

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

、今後のリリースでも半分以下に大きなグリッドのレンダリング時間をカットしたりします2つの変更を持っています。変更の1つは一方向バインディング（これまでに最も一般的に使用されているバインディングモード）の効率を向上させ、もう一方は初期レンダリングが完了するまでバインディング作業を延期します。これにより、oneTimeとoneWayを初期レンダリングと同じように高速に使用できます。ここではこれらの改善の詳細情報：ここhttp://blog.durandal.io/2015/12/04/aurelia-repaint-performance-rules/

デモ：述べたようにhttp://jdanyow.github.io/aurelia-dbmonster/

Answer 2

ちょうど1にあなたの配列を兼ね備えています。