Какими инструментами пользоваться для измерения производительности, например FPS и времени задержки
Что проверяют
Умеете ли вы найти причину тормозов, а не только назвать Lighthouse. Интервьюер ждёт разделения на лабораторные замеры и данные реальных пользователей и почти всегда спрашивает следом, что вы увидите в профиле, если анимация дёргается.
Как отвечать
Сначала метрики. Плавность меряется кадрами: при 60 Гц на кадр есть около 16,7 мс, на экранах 120 Гц вдвое меньше. Задержка отклика в вебе сейчас это INP (Interaction to Next Paint): с марта 2024 года он заменил FID в Core Web Vitals, хорошим считается значение до 200 мс.
Дальше инструменты:
- Chrome DevTools, Performance: запись с замедлением CPU в 4 или 6 раз, дорожка Frames, flame chart главного потока, длинные задачи больше 50 мс помечены красным. Видно, что съело кадр: скрипт, пересчёт стилей, layout или paint;
- вкладка Rendering: Frame Rendering Stats выводит FPS поверх страницы, Paint flashing подсвечивает перерисовки, Layout Shift Regions показывает сдвиги;
- React DevTools Profiler: какие компоненты перерисовались и почему, если стек на React;
- полевые данные: библиотека
web-vitals(onINP,onLCP,onCLS),PerformanceObserverс типамиeventиlong-animation-frame, отправка в свою аналитику. Для публичных сайтов есть CrUX и PageSpeed Insights; - Lighthouse и WebPageTest: лаборатория для загрузки страницы. В обычном режиме навигации INP не меряется, вместо него показывают Total Blocking Time.
Типичный вывод из профиля: анимация через top и width вызывает layout на каждом кадре, а перевод на transform и opacity отдаёт работу композитору.
Где спотыкаются
Меряют на мощном ноутбуке без троттлинга и в dev-сборке. В режиме разработки React заметно медленнее, а у пользователей бюджетные телефоны.
Путают задержку сети с задержкой отклика интерфейса. INP про то, как долго страница занята после клика, а не про ответ сервера.
Оптимизируют вслепую: расставляют useMemo и will-change везде, не записав профиль. Без замера до и после непонятно, что помогло, а will-change на множестве элементов расходует память видеокарты.