Перейти к основному содержимому

Производительность

Производительность — это не только цифры, но и субъективное ощущение пользователя. Интерфейс должен быть быстрым, предсказуемым и визуально стабильным. Оптимизация проектируется на этапе разработки, а не добавляется постфактум.

Цели frontend-оптимизации​

ЦельОписание
Быстрая загрузкаПервый значимый контент появляется без ощущения ожидания
ПлавностьИнтерфейс не тормозит, не дёргается, не зависает при взаимодействии
СтабильностьКонтент не прыгает и не сдвигается во время загрузки
ПредсказуемостьПользователь в любой момент понимает состояние интерфейса

Общие принципы​

MUST​

  • Порог визуального отклика — 100ms — любое действие пользователя подтверждается мгновенно.
  • Индикация ожидания — для всех операций длиннее 100ms обязателен промежуточный статус (spinner, skeleton).
  • Прогрессивная загрузка — контент отрисовывается в порядке приоритета: Layout → LCP → второстепенные модули.
  • Плавность — 60 FPS — все анимации и интерактивные переходы выполняются с частотой 60 FPS (~16.6ms на кадр).
  • Long Tasks < 50ms — длительность одной задачи в main thread не превышает 50ms. Превышение увеличивает Input Delay и ухудшает INP.
  • Запрет Request Waterfalls — последовательные сетевые запросы там, где возможен параллельный вызов (Promise.allSettled), запрещены. Исключение: запросы с зависимостью по данным.

SHOULD​

  • Optimistic UI — для предсказуемых действий (лайки, избранное) состояние обновляется до ответа сервера. Обязателен rollback при ошибке.
  • Тяжёлые операции выносить из main thread через yielding / task splitting или Web Workers (например: сортировка/фильтрация > 5000 объектов, обработка Canvas).

FORBIDDEN​

  • Оставлять действие пользователя без визуального отклика.
  • Блокировать интерфейс без явного состояния загрузки.
  • Выполнять тяжёлые операции синхронно в основном потоке.
  • Последовательные сетевые запросы там, где возможен параллельный вызов.

Структура документации​