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

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

Справочная таблица ASCII

Полная таблица ASCII от 0 до 127 с десятичным, шестнадцатеричным, восьмеричным и двоичным представлением, а также записью числовых ссылок HTML, включая NUL, LF и DEL.

Справочник сочетаний клавиш

Ищите документированные сочетания по умолчанию для VS Code, Chrome и Bash с GNU Readline в macOS, Windows и Linux.

Справочник символов HTML

Справочник HTML-сущностей с поиском, их именованными и числовыми кодами, а также копированием специальных символов и знаков одним кликом.

Шпаргалка по Markdown

Практический справочник Markdown с настоящим предпросмотром и готовыми для копирования примерами заголовков, списков, таблиц, кода, ссылок, изображений и синтаксиса GFM.

Генератор EditorConfig

Создайте файл .editorconfig с вашими правилами стиля и размера отступа, конца строки, кодировки и пробелов для единообразного форматирования во всех IDE и редакторах.

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

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

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