Привет! Продолжаем разбирать малоизвестные, но крайне полезные фичи Chrome DevTools. Меня зовут Святослав Ященко, я тимлид QA‑команды Platform V Kintsugi — это графическая консоль для сопровождения PostgreSQL и Postgres‑like СУБД. Ранее я писал о том, как тестировать производительность через вкладку Performance. Материала набралось так много, что мне пришлось разбить его на две статьи. Сегодня мы поговорим об утилите Performance monitor, инструменте Chrome Task Manager и о том, как вывести FPS сайта на экран.
Performance monitor
Этот инструмент во многом схож по функциональности со вкладкой Performance. Но главное его предназначение — отслеживать производительность в реальном времени, без необходимости создания профиля нагрузки. Утилита ограничена по возможностям и часто используется в ситуации, когда вы только ищете проблемные места на сайте, не зная их заранее.
Впоследствии, уже определив эти места, мы можем перейти на вкладку Performance и, запустив создание профиля нагрузки, проиграть нужный сценарий.
Чтобы найти Performance monitor, вам необходимо:
открыть DevTools;
перейти в расширенные возможности через три вертикальных точки;
навести курсор на опцию More tools;
найти и выбрать в списке Performance monitor.
Вы увидите таймлайн в режиме реального времени, и три выбранных по умолчанию графика: CPU usage, JS heap size и DOM nodes.
Для полноценной демонстрации возможностей инструмента необходимо подать нагрузку. Для этого я проведу демонстрацию на сайте, уже известном вам по предыдущей статье. Кратенько напомню, что он из себя представляет. Это анимация с летающими вверх‑вниз кубиками. Изначально там 10 квадратов. Интерфейс включает в себя кнопки управления, с помощью которых можно:
добавить 10 новых летающих кубиков;
убрать 10 старых летающих кубиков;
остановить или начать движение кубиков;
включить или отключить оптимизацию анимации на сайте.
Проведём эксперимент: каждые 3 секунды я буду добавлять на сайт 10 новых кубиков, и мы посмотрим результат в инструменте Performance monitor.
Итоговый отчёт на экране.
До красной линии я планомерно повышал нагрузку на интерфейс, добавляя летающие квадраты. Примерно на 110 летающих квадратах нагрузка на процессор достигла 100 %, и тогда появились ощутимые просадки производительности. После синей линии я стал убирать квадраты, и производительность резко улучшилась.
Frames per second meter
Оценить FPS (Frames Per Second — кадры в секунду) на глаз сложно. В этом нам поможет ещё один полезный маленький инструмент DevTools под названием FPS meter. Это панель, которая висит поверх окон браузера и отображает текущий FPS.
Чтобы добавить её, откроем DevTools, зайдём в расширенные возможности через три вертикальные точки и выберем опцию Run command. К слову, здесь же активируется возможность подмены трафика в DevTools, о которой я писал в своей статье.
В поисковой строке наберём слово FPS и выберем команду Show frames per second (FPS) meter.
В левом верхнем углу сайта появится следующая панель:
К слову, утилита отвечает не только за FPS, хотя это и её главная функция.
Разберём оставшиеся.
GPU raster
Метрика показывает значение флага GPU rasterization. Если по-простому, то включение этого флага увеличит производительность вашего сайта за счёт более высокого потребления ресурсов графического процессора. У меня этот флаг находится в режиме on. Включается (и выключается) он следующим образом:
откройте ссылку
chrome://flags/;поиском найдите флаг GPU rasterization;
задайте ему значение Enable;
перезагрузите браузер.
GPU memory
Тут всё просто — метрика отображает текущее и максимальное потребление ресурсов графического процессора. Если текущее приближается к максимальному, то, вероятно, сайт недостаточно оптимизирован, либо у вас слабый видеочип.
Вернёмся к основной метрике — Frame Rate. На моём демонстрационном сайте всего при 10 летающих квадратах он показывает 60 кадров в секунду, это комфортная глазу скорость отрисовки страницы.
Как мы убедились раньше, проблемы с нагрузкой начинаются на 110 летающих квадратах. Воспроизведём эту ситуацию и посмотрим, как сильно перегруженный процессор повлиял на Frame Rate.
На самом деле, не сильно: метрика показывает просадку всего на 2,4 FPS.
Добавим ещё сотню летающих квадратов.
Вот тут начались действительно большие проблемы: просадка почти на 50 %.
Chrome Task Tracker
Мы научились смотреть в динамике нагрузку на процессор, а также FPS и нагрузку на видеокарту в моменте. И я расскажу ещё об одном инструменте для мониторинга в том числе и текущего потребления RAM (оперативной памяти) вкладкой. Речь о Chrome Task Tracker.
Чтобы войти в него, нажмите на три вертикальные точки в правом верхнем углу экрана, выберите More Tools, затем Task Tracker.
Мы видим панель Task Tracker, открытую на вкладке Tabs and extensions.
Здесь можно посмотреть RAM (колонка memory footprint), нагрузку на процессор, входящий трафик (колонка network — сейчас равен 0 кб/с) и номер процесса. Здесь же можно закрыть любую задачу, выбрав её и кликнув кнопку End task.
Прочие вкладки таск-менеджера отображают примерно то же самое, в этом обзоре я хотел продемонстрировать именно метрику потребления нашей вкладкой RAM.
Вместо заключения
Chrome предоставляет множество инструментов для замера производительности, и в своих статьях я прошёлся лишь по поверхности. Больше и подробнее — в документации по Chrome DevTools.
Сейчас готовлю четвёртую, заключительную статью о тестировании производительности фронтенда. В ней расскажу про Lighthouse — инструмент для аудита производительности, доступности, SEO и других аспектов веб-страницы. Чтобы не пропустить новые руководства, приходите в наше сообщество, там мы делимся разным полезным и публикуем вакансии.
Напишите в комментариях, какие ещё возможности DevTools вам было бы интересно разобрать. Если я работаю с этими инструментами, то продолжу цикл статей. Спасибо за внимание!