Чеклист оптимизации фронтенда

• В *ngFor задана функция trackBy со стабильным уникальным id; на Angular 17+ используется @for ... track filter.id.
• Отслеживание идёт по бизнес-идентификатору (filter.id, filter.field), а не по индексу массива.
• Массив фильтров обновляется иммутабельно (spread, filter(), map()) — без мутаций.
• Для компонентов с таблицами рассмотрено использование ChangeDetectionStrategy.OnPush.
• Опции для p-dropdown кэшируются на уровне сервиса через shareReplay(1), а не подгружаются повторно при каждой перерисовке.
• Для p-dropdown и p-calendar задано appendTo="body".
• Для p-dropdown со 100+ опций включён virtualScroll с указанием virtualScrollItemSize.
• Для больших таблиц используется [lazy]="true" и серверная фильтрация/пагинация.

• Подписка на valueChanges обязательно содержит цепочку операторов — «голая» подписка ведёт к запросу на каждое нажатие клавиши.
• Через map(value => value?.id || null) извлекается конкретный атрибут (обычно id), а не весь объект.
• После map стоит distinctUntilChanged().
• Для текстового поиска применяется debounceTime(300–500) — короче 300 мс смысла не имеет.
• Для текстового поиска отсекаются короткие строки через filter(text => text.length >= 3).
• Если автозаполнение не требуется, используется событие (selectedItem) вместо подписки на valueChanges.
• Для нескольких фильтров значения объединены через combineLatest с общим debounceTime — а не подписаны независимо.
• При ручном тестировании в DevTools количество запросов соответствует ожидаемому (один запрос на финальный выбор/ввод).

• Рассмотрена альтернатива на базе SSE через SseService. Поллинг используется, только если SSE невозможен.
• Поллинг запускается в ngOnInit или позже по действию пользователя, но не в конструкторе.
• Установлено ограничение по времени (takeUntil(timer(N))) или количеству запросов (take(N)).
• Реализована условная остановка при достижении целевого состояния (например, status === 'completed').
• Предотвращены параллельные поллинги одной задачи: сервис-синглтон с shareReplay(1) или явный stopPolling() перед стартом нового.
• В цепочке стоит distinctUntilChanged, чтобы UI не перерисовывался, если данные не изменились.
• В subscribe нет тяжёлых операций — пересчёты, обновление графиков, нотификация других сервисов вынесены наружу.
• Интервал соответствует рекомендациям: уведомления — 30–60 с (лучше SSE), статус фоновой задачи — 5–10 с, дашборд — 10–30 с, критичные данные — только SSE/WebSocket.
• Реализован обработчик ошибок сети (error-колбэк или catchError).

Layout Thrashing

• В циклах не чередуются чтение (offsetWidth, getBoundingClientRect, scrollTop, getComputedStyle) и запись стилей.
• Сначала фаза чтения — все измерения в массив, затем фаза записи — все изменения разом.

Слушатели событий

• Для каждого addEventListener есть парный removeEventListener при уничтожении компонента.
• Колбэк хранится в свойстве компонента (через .bind(this)), а не создаётся инлайн — иначе его невозможно снять.
• Для новых компонентов используется AbortController + опция signal в addEventListener — это упрощает массовое снятие слушателей.

Наблюдатели

• У MutationObserver минимально необходимая область наблюдения и отключены ненужные опции (attributes, characterData, subtree).
• Тяжёлые операции в колбэках наблюдателей обёрнуты в debounce (≥100 мс) или throttle.
• Все наблюдатели отключаются (observer.disconnect()) при уничтожении компонента.

Работа с DOM и таймерами

• Для вставки множества элементов используется DocumentFragment — одна операция вместо N.
• Контент, попадающий в innerHTML, экранируется (защита от XSS).
• Все таймеры (setTimeout, setInterval, requestAnimationFrame) отменяются при уничтожении компонента.

Что анимировать

• Анимируются только transform и opacity — они выполняются на GPU, не вызывают Layout и Paint.
• Не анимируются свойства, влияющие на layout: top, left, right, bottom, width, height, margin, padding. Каждый кадр вызывает пересчёт макета всех потомков. Вместо left/top — transform: translate(), вместо width/height — transform: scale().
• Не анимируются paint-свойства (color, background-color, box-shadow) на крупных или часто меняющихся элементах — каждый кадр заново перерисовывается весь элемент.

Дорогие CSS-свойства

• filter и особенно backdrop-filter: blur() применяются точечно и на небольших областях — это одни из самых дорогих эффектов в браузере.
• box-shadow с большим радиусом размытия не применяется к крупным или анимируемым элементам — браузер перерисовывает тень каждый кадр. Альтернатива: статичная PNG-тень или предзаготовленный SVG.
• Сложные градиенты не используются как фон у часто перерисовываемых элементов; на статичных фонах допустимо.

Изоляция и подсказки браузеру

• У элементов, которые будут анимироваться, проставлен will-change: transform или will-change: opacity — браузер заранее создаёт composite layer. Свойство применяется точечно: на десятках элементов оно съест память и даст обратный эффект.
• У изолированных областей (карточки, элементы списка, виджеты) проставлен contain: layout paint или contain: strict — браузер не пересчитывает layout всего документа при изменениях внутри.

Длинные и фоновые анимации

• Бесконечные @keyframes (animation-iteration-count: infinite) приостанавливаются, когда элемент не виден: через IntersectionObserver + animation-play-state: paused или через CSS-класс. Иначе анимации продолжают потреблять ресурсы на скрытых вкладках.
• Анимации одновременно на 50+ элементов разнесены по времени (staggered) или заменены на одну анимацию контейнера.
• Учтены пользовательские настройки prefers-reduced-motion — анимации отключены или сокращены для пользователей с этой настройкой.

• DevTools → Network: количество запросов при типовых сценариях соответствует ожиданиям.
• DevTools → Performance: при записи типичного сценария отсутствуют Long Tasks (более 50 мс).
• DevTools → Memory: heap-снапшоты до и после действий пользователя не показывают рост памяти, нет детачнутых DOM-узлов.
• DevTools → Rendering → Paint flashing / Layer borders: проверено, что анимации не вызывают перерисовки крупных областей.
• FPS при прокрутке и взаимодействии стабильно держится около 60.