Как посмотреть FPS в Google Chrome

Зачем смотреть частоту кадров (FPS)

FPS показывает, сколько отдельных изображений устройство рендерит в секунду. Высокая частота кадров делает анимацию и скроллинг плавнее. Это важно для игр, веб-приложений с анимацией и при тестировании производительности сайтов.

Отличие от частоты обновления экрана (refresh rate): FPS измеряет, сколько кадров генерирует браузер или сайт. Refresh rate — сколько раз в секунду обновляется физический дисплей. Оба показателя влияют на восприятие плавности, но это разные вещи.

Важно: ориентиры для плавности

• 60 FPS — обычно воспринимается как полностью плавное.
• 30 FPS — допустимо для видео и некоторых интерфейсов.
• Ниже 30 FPS — анимация может казаться рваной.

Как открыть счётчик FPS через Инструменты разработчика

1. Откройте Google Chrome и загрузите страницу, которую хотите измерить.
2. Правый клик на странице и выберите «Inspect» (Просмотреть код) или нажмите Ctrl + Shift + C на Windows/Linux. На macOS используйте Cmd + Option + I.

3. В Инструментах разработчика нажмите на меню с тремя вертикальными точками (Ellipsis) в правом верхнем углу панели.
4. Наведите курсор на «More tools» и выберите «Rendering» в подменю. Откроется секция в нижней части окна.

5. В разделе Rendering найдите опцию Frame Rendering Stats и поставьте галочку.
6. В левом верхнем углу вкладки появится FPS Meter — живой индикатор кадров в секунду, а также информация о растеризации GPU и использовании памяти.

Альтернатива: нажмите Ctrl + Shift + P (Cmd + Shift + P на macOS), введите «show frames» и выберите «show frames per second (FPS) meter». Для скрытия введите «hide frames» в той же командной строке.

Быстрый чек-лист для замера FPS

• Закройте ненужные вкладки и фоновые приложения.
• Отключите запись сети или профайлинг, если вы не тестируете их влияние.
• Установите эталонную сцену: одно и то же действие до и после изменений.
• Снимите показания FPS в течение 10–30 секунд.
• Сравните среднее и минимальное значение FPS.

Важно: счётчик исчезает при закрытии Инструментов разработчика. Он показывает данные только для активной вкладки.

Методология простого тестирования производительности

1. Фаза «Базовая»: откройте страницу и зафиксируйте FPS в спокойном состоянии (скролл, анимация, интеракция).
2. Фаза «Изменение»: примените оптимизацию (закройте процессы, уменьшите качество изображений, отключите расширения).
3. Фаза «Повторная проверка»: снова измерьте FPS теми же действиями.
4. Оценка: если средний FPS вырос и минимальные просадки стали меньше, оптимизация успешна.

Критерии приёмки

• Средний FPS ≥ 50 на десктопе для интерактивных интерфейсов.
• Минимальный FPS не ниже 30 во время ключевых анимаций.
• CPU/GPU не перегреваются и потребление памяти остаётся в пределах допустимого.

Когда счётчик FPS может не показывать точные данные

• Аппаратные ограничения экрана или драйверов могут искажать восприятие.
• Некоторые внешние расширения или плагины влияют на отображаемые значения.
• Когда в системе активно энергосбережение, браузер может уменьшать частоту рендеринга.

Альтернативные подходы

• Используйте chrome://tracing или Performance вкладку в DevTools для более точного профилирования и записи трасс.
• Для веб-игр применяйте встроенный инструмент движка (например, статистику рендеринга в игровом движке).
• На мобильных устройствах используйте профайлеры платформы (Android Studio, Xcode Instruments).

Шпаргалка для разных ролей

Для разработчиков:

• Замеряйте FPS при отключённых расширениях.
• Снимайте профили производительности и ищите узкие места в отрисовке.

Для тестировщиков:

• Проверяйте минимальные значения FPS в сценариях с максимальной нагрузкой.
• Документируйте конфигурацию устройства и настройки Chrome.

Для пользователей и геймеров:

• Закройте фоновые приложения и вкладки.
• Попробуйте аппаратное ускорение в настройках Chrome: если оно включено, тестируйте и с выключенным состоянием.

Короткий глоссарий

• FPS — кадры в секунду, показывает, сколько изображений генерируется в секунду.
• Refresh rate — частота обновления экрана, измеряется в герцах (Hz).
• GPU — графический процессор, отвечает за рендеринг изображений.
• Растеризация — процесс превращения векторных данных в пиксели.

Примеры типичных проблем и решения

• Проблема: резкие просадки FPS при прокрутке. Решение: проверьте heavy paints и long tasks во вкладке Performance.
• Проблема: счётчик не появляется. Решение: откройте DevTools заново и включите Frame Rendering Stats или используйте командную палитру.
• Проблема: низкий FPS на мощном ПК. Решение: проверьте фоновые процессы, драйверы GPU, расширения Chrome.

Итог

Поместите FPS Meter в рабочий процесс проверки производительности. Это быстрый и удобный способ получить индикацию плавности интерфейса и оценить эффект оптимизаций. Для глубокого анализа используйте Performance и chrome://tracing.

Краткие выводы:

• Включите Frame Rendering Stats в разделе Rendering, чтобы увидеть FPS.
• Сравнивайте замеры до и после изменений по одинаковым сценариям.
• Используйте дополнительные инструменты DevTools для детального профилирования.