Счетчик 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.

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

Генератор случайных цветовых палитр

Создавайте случайные палитры из 2–15 цветов, выбирайте яркий, пастельный, приглушенный или темный стиль и копируйте HEX-коды или CSS-переменные.

Конвертер BBCode в HTML

Преобразуйте BBCode (разметку форумов) в чистый HTML. Поддерживает теги форматирования, списки, цитаты, код, изображения, ссылки и таблицы.

Выбор цвета HEX

Выберите цвет визуально и получите значения HEX, RGB, HSL, HSV и CMYK, а также контраст на белом и чёрном фоне.

Форматировщик JSON

Вставьте JSON, чтобы оформить его с отступом 2 или 4 пробела, минифицировать до компактного вывода или быстро проверить синтаксис перед копированием результата.

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

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

Генератор цветовой палитры

Создавайте монохромные, аналоговые, комплементарные, триадные или тетрадные палитры из базового HEX-цвета и экспортируйте готовые CSS-переменные.