Счетчик FPS

Текущий FPS
Секунды
рамки
FPS
Далее

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

Как измерить FPS в браузере

  1. 1

    Выберите длительность замера

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

  2. 2

    Задайте сглаживание и порог предупреждения

    Окно сглаживания усредняет последние кадры, а порог задает уровень FPS, который вы считаете приемлемым для тестируемого устройства.

  3. 3

    Запустите счетчик и оцените разброс

    Текущий FPS показывает недавнюю скорость отрисовки. Среднее, минимальное и максимальное значения говорят, была ли сессия стабильно плавной или в ней были заметные просадки.

Что измеряет счетчик FPS

Инструмент измеряет ритм отрисовки в браузере, а не результат видеокарты в бенчмарке. Каждый раз, когда браузер готов нарисовать очередной кадр, requestAnimationFrame вызывает сэмплер. Время между двумя вызовами дает мгновенную частоту кадров:

FPS = 1000 / frame_time_in_ms

Показанный текущий FPS представляет собой скользящее среднее по окну сглаживания. Окно в 60 кадров хорошо подходит для обычных дисплеев 60 Гц: оно гасит одиночные всплески, но не скрывает продолжительные падения. Меньшие окна реагируют быстрее, большие выглядят ровнее.

Разбор примера

Допустим, замер за пять секунд зафиксировал такие упрощенные интервалы между кадрами:

Интервал между кадрами Мгновенный FPS О чем это говорит
16,7 мс 59,9 FPS Обычная отрисовка на 60 Гц
8,3 мс 120,5 FPS Обычная отрисовка на 120 Гц
25,0 мс 40,0 FPS Заметное замедление на многих дисплеях
33,3 мс 30,0 FPS Высокая нагрузка или троттлинг

Если ваш порог предупреждения равен 50 FPS, а измеренное скользящее среднее заканчивается на 47 FPS, результат ниже цели, даже если отдельные кадры были быстрее. Если оно останавливается около 60 FPS с редкими просадками до 45 FPS, среднее в норме, но минимум подсказывает: были статтеры, которые стоит изучить.

Как читать результаты

Картина результата Вероятная причина Что проверить дальше
Среднее близко к частоте обновления, просадки редки С отрисовкой все хорошо Сравнивать с другим браузером только при необходимости
Среднее хорошее, минимум намного ниже Периодические статтеры Закройте тяжелые вкладки или проверьте анимации
Среднее ниже порога Постоянно высокая нагрузка на отрисовку Проверьте загрузку CPU, расширения и скрипты страницы
FPS упирается в 30 Энергосбережение или троттлинг Проверьте режим питания и настройки дисплея

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

Часто задаваемые вопросы

Нет. Этот счетчик измеряет, как часто браузер получает вызовы requestAnimationFrame. Он полезен для веб-анимаций и проверки плавности страницы, но это не полноценный бенчмарк GPU для нативных игр.

Большинство браузеров привязывают кадры анимации к частоте обновления дисплея. Монитор 60 Гц обычно показывает около 60 FPS, а дисплеи 120 Гц или 144 Гц могут выдавать больше, если это позволяют браузер и операционная система.

Для обычной проверки плавности на 60 Гц берите 50 FPS. Для мониторов с высокой частотой обновления ставьте порог ближе к ожидаемым ощущениям, например 90 FPS или 120 FPS.

Нет. Измерение выполняется в вашем браузере через локальные API таймингов. Инструмент не отправляет данные о кадрах, скриншоты или сведения об устройстве во внешние API.

Сопутствующие инструменты

Смешивание цветов

Смешайте два HEX-цвета в 2-20 равномерных образцов. Каждый промежуточный цвет показывается как HEX-код в верхнем регистре, включая оба края.

Генератор вымышленных телефонных номеров

Создавайте до 50 вымышленных номеров из официально зарезервированных диапазонов пяти стран.

Генератор бейджей README

Создавайте бейджи shields.io для файлов README на GitHub: статус сборки, версия, лицензия, число загрузок и покрытие кода. Просмотрите и скопируйте фрагмент Markdown.

Генератор случайных букв

Генерируйте случайные буквы A-Z. Выберите количество, верхний или нижний регистр либо смешанный вариант для игр, заданий и уроков.

Генератор случайных адресов

Создавайте 1–20 похожих на адрес записей для макетов и тестов в трёх упрощённых форматах.

Проверка телефонных номеров

Проверьте структуру номера по стране и получите регион, тип, форматы E.164, международный, национальный и RFC 3966.

Инструмент доступен на других языках