Оптимизация списков и отображения
Ускоряйте работу больших списков с помощью отслеживания элементов
«Оптимизация списков и отображения» — бесплатный урок Angular Academy на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Angular Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Angular Academy содержит 4 уроков всего.
Почему важна отрисовка списков
Списки чаще всего становятся узким местом производительности. Повторная отрисовка всего списка при каждом изменении приводит к лишней работе и сбрасывает состояние DOM. Angular предоставляет инструменты для эффективной отрисовки.
Блок @for
Встроенный элемент управления потоком @for требует выражения track, чтобы Angular мог идентифицировать каждый элемент при обновлениях.
@for (item of items(); track item.id) {
<li>{{ item.name }}</li>
}Почему необходим track
Без стабильного идентификатора Angular не может определить, какие элементы переместились, были добавлены или удалены. track сопоставляет каждый отрисованный узел с его данными, поэтому DOM переиспользуется, а не создаётся заново.
Отслеживание по идентификатору
Используйте уникальный стабильный ключ, например идентификатор. Не применяйте track $index для списков, в которых меняется порядок элементов: изменение индексов вызывает ненужную перестройку DOM.
@for (user of users(); track user.id) {
<app-user-card [user]="user" />
}Когда уместен track $index
Если у элементов нет уникального идентификатора и их порядок никогда не меняется (например, в журналах, доступных только для добавления), track $index допустим.
@for (line of logLines(); track $index) {
<p>{{ line }}</p>
}Устаревший trackBy
При использовании старого *ngFor укажите функцию trackBy, возвращающую стабильный ключ.
trackById(index: number, item: Item) {
return item.id;
}trackBy в шаблоне
Укажите функцию в микросинтаксисе *ngFor.
<li *ngFor="let item of items; trackBy: trackById">
{{ item.name }}
</li>Пустое состояние и состояние загрузки
@for поддерживает блок @empty для случаев, когда коллекция пуста, поэтому дополнительные проверки *ngIf не нужны.
@for (item of items(); track item.id) {
<li>{{ item.name }}</li>
} @empty {
<li>No items yet.</li>
}Избегайте вызовов функций в привязках
Функции в шаблонах выполняются при каждой проверке. Вместо вызова методов в теле @for заранее вычисляйте значения в сигналах или мемоизированных полях.
OnPush и неизменяемые списки
Сочетайте OnPush с созданием новой ссылки на массив при каждом изменении. При правильном использовании track Angular обновляет только те строки, которые действительно изменились.
this.items.update(list => [...list, newItem]);Виртуальная прокрутка
Для очень больших списков отрисовывайте только видимые строки с помощью CDK cdk-virtual-scroll-viewport, сохраняя небольшой размер DOM независимо от объёма данных.
<cdk-virtual-scroll-viewport itemSize="48">
<div *cdkVirtualFor="let item of items">
{{ item.name }}
</div>
</cdk-virtual-scroll-viewport>Быстрая проверка
Проверьте, насколько хорошо Вы поняли оптимизацию списков.
Итоги
Вы узнали, как оптимизировать списки с помощью @for ... track или устаревшего trackBy, используя стабильные ключи, блок @empty, неизменяемые обновления с OnPush и виртуальную прокрутку для очень больших коллекций.
Часто задаваемые вопросы
Урок «Оптимизация списков и отображения» бесплатный?
Да — полный текст урока «Оптимизация списков и отображения» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Angular Academy, подпишись на CoddyKit PRO. Курс Angular Academy содержит 4 уроков всего.
Чему я научусь в уроке «Оптимизация списков и отображения»?
Ускоряйте работу больших списков с помощью отслеживания элементов Ты практикуешь Angular Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Angular Academy?
Предыдущий опыт не требуется. Angular Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.
Сколько времени занимает урок «Оптимизация списков и отображения»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Angular Academy?
Да. Каждый урок Angular Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Как работает обнаружение изменений
- Обнаружение изменений OnPush
- Angular без зон
- Оптимизация списков и отображения