Счетчик FPS
Этот счетчик FPS показывает, насколько плавно браузер отрисовывает текущую страницу. Он снимает кадры через requestAnimationFrame, выводит текущую, среднюю, минимальную и максимальную частоту кадров и может построить короткий график, чтобы вы заметили просадки из-за тяжелых вкладок, анимаций, расширений, троттлинга или настроек дисплея.
Как измерить FPS в браузере
-
1
Выберите длительность замера
Пять секунд подойдут по умолчанию. Возьмите более длинный замер, если хотите поймать периодические статтеры или изменения фоновой нагрузки.
-
2
Задайте сглаживание и порог предупреждения
Окно сглаживания усредняет последние кадры, а порог задает уровень FPS, который вы считаете приемлемым для тестируемого устройства.
-
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-переменные.