NgFor

Функциональность

A structural directive that renders a template for each item in a collection. The directive is placed on an element, which becomes the parent of the cloned templates.

Почему здесь перфоманс важен

Списки/таблицы которые будут рендериться синхронно и в связи с этим директива будет ждать пока все элементы не отрисуются. Соответственно чем больше элементов и чем они нагруженнее - тем дольше нам ждать отрисовки юая

Примеры плохого кода

не использовать ngTrackBy

Примеры хорошего кода

ngTrackBy

Можем ли мы писать проект без этого

Да, во многих случаях ngFor это директива просто делающая много работы за нас, но не имеет особого смысла

Подводные камни

Как упоминалось выше, ngFor синхронный, соответственно вся часть ответственная за отрисовку будет рендерить и отображать элементы по очереди, в одном фрейме.

В этой директиве также нет возможности сделать что-тго наподобие draw & forget, когда нам не надо следить за изменениями в массиве, а просто отрисовать. Тут по-хорошему бы это еще на моменте компиляции темплейт делать, но ладно

Любой итерируемый объект проверяется на изменения только через IterableDiffers, если происходит shallow-copy объекта, то перерендеривается все и сразу

Что влияет на перформанс в этой фиче?

Тяжелые для построения компоненты

Количество элементов в массиве

IterableDiffers который помогает, но в большинстве случаев при неправильном использовании тоже дает нагрузку

Слишком сложная функция проверки идентичности

Неиспользование trackBy

Как можно избавиться от негативного влияния на перформанс

Использовать пагинацию в тех местах где возможно

Сделать рендер компонентов асинхронным

Чего не хватает в базовой функциональности

Асинхронности или параметра, который бы отвечал за это

Темплейты для пустого массива

Кастомной реализации IterableDiffers или любого другого варианта сравнения элементов

Нет обычного итератора, вроде отрисуй мне 10 штук того-то или сего-то. Как вариант сделать свой кастомный NgRepeat или если количество элементов меньше 3-4 то прописать их всех руками