Блог

Рассмотрим следующий 2d-массив:

 myLabels = [[45, 56, 63],
            [31, 67, 27],
            [89, 23, 61]]
  

Теперь в шаблоне выполните итерацию по этому массиву следующим образом:

 <template ngFor let-row_ [ngForOf]=myLabels let-i="index">
  <template ngFor let-labelid [ngForOf]=row_ let-j="index">
    ...
  </template>
</template>
  

Когда я увеличиваю свой массив до чего-то большего, производительность падает довольно сильно. Рендеринг массива скромных размеров 40×40 с использованием Chromium 50 занимает почти 40 секунд. В Firefox 47 это немного быстрее, но ненамного.

Если я исключу назначения индексов ( let-i="index"... ), то производительность будет просто отличной

 <template ngFor let-row_ [ngForOf]=myLabels>
  <template ngFor let-labelid [ngForOf]=row_>
    ...
  </template>
</template>
  

Итак, вопрос в том, что можно сделать, чтобы смягчить эту проблему? Есть ли что-то, чего я не понимаю ngFor ? Есть ли другой способ?

Вы пытались изменить свою стратегию обнаружения изменений на: ChangeDetectionStrategy.OnPush ?

Также рассмотрите возможность создания неизменяемых массивов.(Смотрите immutable.js )

Проверьте эту статью: http://jvandemo.com/how-i-optimized-minesweeper-using-angular-2-and-immutable-js-to-make-it-insanely-fast/