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

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

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

Любые идеи о том, как улучшить производительность?

На основе первоначальных предложений я попытался избежать вложенных повторов, но это невозможно в моем случае, поскольку оба столбца и строки являются динамическими.

Ответ 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/

Ответ 2

Просто объедините свои массивы в один, как указано.