Эффективное отображение больших таблиц данных с помощью Aurelia

Question

Я изо всех сил стараюсь выполнять большие таблицы данных с помощью Aurelia.

Даже в случае таблиц с умеренным размером (20x20) я не получаю ниже 200 мс для Chrome, MS Edge занимает ~ 800 мс, а IE11 занимает ~ 2 с. 200 мс тоже проблема, если вы хотите добавить (виртуальную) прокрутку. Время обработки увеличивается с количеством привязок к ячейке таблицы. Я собрал (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> 

12/13/2015 EDIT

Предстоящий релиз имеет два изменения, которые будут сократить время рендеринга больших сеток пополам или даже меньше. Одно из изменений повышает эффективность односторонних привязок (на сегодняшний день наиболее часто используемый режим привязки), а другой откладывает работу по привязке до тех пор, пока не будет выполнен первоначальный рендеринг. Это будет сделано с использованием oneTime и oneWay так же быстро, как и исходный рендер. Более подробная информация об этих улучшениях здесь: http://blog.durandal.io/2015/12/04/aurelia-repaint-performance-rules/

Демо здесь: http://jdanyow.github.io/aurelia-dbmonster/

Answer 2

Просто объединить массивы в один, как упоминался.