Этап 12 из 19 · ≈ 8 ч

Отзывчивость интерфейса

Основа с Middle

Долгие задачи, лишние перерасчёты раскладки и тяжёлые рендеры — почему интерфейс тормозит.

На кадр при 60 Гц — около 16 мс. Всё, что занимает главный поток дольше 50 мс, — долгая задача: интерфейс не реагирует на клики и ввод.

Что важно знать

  • Дробить долгую работу и отдавать управление браузеру (await scheduler.yield() или setTimeout), тяжёлые вычисления — в Web Worker.
  • Layout thrashing: чередование записи стилей и чтения размеров (offsetHeight) в цикле заставляет браузер пересчитывать раскладку каждый раз. Сначала все чтения, потом все записи.
  • Анимировать transform и opacity, а не геометрию.
  • Длинные списки — виртуализация.
  • Обработчики частых событий — throttle, debounce, requestAnimationFrame.
  • Утечки памяти: забытые подписки, таймеры, обработчики — снимок кучи в DevTools.
  • Профилирование: вкладка Performance показывает, что именно занимает кадр.

Критерии освоения

Middle ≈ 8 ч

  • Находит долгие задачи и лишние пересчёты раскладки в профайлере и устраняет их
  • Улучшает INP — дробление работы, Web Worker, виртуализация списков

Практика. Ускорить взаимодействие с таблицей на 10 тысяч строк до INP ниже 200 мс и показать профили до и после.

Senior ≈ 4 ч

  • Выстраивает мониторинг производительности реальных пользователей и разбор регрессий

Практика. Настроить сбор INP реальных пользователей по страницам и разобрать топ-3 регрессии.

Проверка знаний

Войдите, чтобы пройти тест: сданный тест отмечает тему пройденной на карте и в ИПР.

Вопросы с собеседований

Смотреть все
Как браузер отрисовывает страницу и чем reflow отличается от repaint?Junior

HTML → DOM, CSS → CSSOM, вместе → дерево отрисовки → layout (геометрия: размеры и позиции) → paint (пиксели слоёв) → composite (сборка слоёв на GPU). Reflow — пересчёт раскладки при изменении геометрии, дорогой; repaint — перерисовка без изменения геометрии…

Полный разбор
Когда компонент React перерисовывается и как избежать лишних рендеров?Junior

Компонент перерисовывается, когда меняется его состояние, контекст, который он читает, или перерисовывается родитель (по умолчанию — все дети, даже с теми же props). React.memo пропускает рендер при неизменных props (сравнение по ссылке), useMemo запоминает…

Полный разбор
Чем debounce отличается от throttle?Junior

Debounce — вызвать функцию, только когда события прекратились на N мс: поиск по вводу, сохранение черновика, resize. Throttle — вызывать не чаще раза в N мс, пока события идут: прокрутка, движение мыши, отслеживание позиции.

Полный разбор
Как работает event loop в JavaScript — макрозадачи и микрозадачи?Junior

JavaScript выполняется в одном потоке. Цикл событий берёт одну макрозадачу (скрипт, setTimeout, событие, сетевой ответ), выполняет её до конца, затем все микрозадачи (then у промисов, await-продолжения, queueMicrotask), затем при необходимости отрисовку, и…

Полный разбор
Что такое Core Web Vitals и как их улучшить?Middle

Три метрики Google, измеряемые на реальных пользователях: LCP — когда отрисован главный элемент (хорошо ≤ 2,5 с), INP — задержка реакции на действия пользователя (≤ 200 мс), CLS — сдвиги вёрстки при загрузке (≤ 0,1). LCP улучшают быстрым ответом сервера…

Полный разбор
Как держать производительность большого фронтенд-приложения под контролем?Senior

Производительность деградирует незаметно — по килобайту в каждом PR. Удержать её помогают бюджеты (размер JS на маршрут, LCP, INP) с проверкой в CI, которая блокирует превышение, мониторинг реальных пользователей (RUM) по маршрутам и устройствам с алертами…

Полный разбор

Документация

← Вся карта «Frontend-разработчик»

Партнёр платформы

Разбор собеседования с sotto

После собеседования sotto разбирает разговор: оценка, каждый вопрос — хорошо, частично или слабо, чего не хватило в ответе и над чем поработать к следующему разу. Первые 30 минут бесплатно.

Разбор собеседования