Используйте монитор производительности , чтобы быстро получить представление о нагрузке вашего сайта и производительности во время выполнения.
Обзор
На панели «Монитор производительности» отображается временная шкала, на которой отображаются показатели производительности в режиме реального времени. Щелкните показатель, чтобы отобразить или скрыть его. Затем посмотрите, как меняется график при взаимодействии с вашим приложением.
Монитор производительности отслеживает следующие показатели:
- Использование процессора.
- Размер кучи JavaScript.
- Общее количество узлов DOM, прослушивателей событий JavaScript, документов и фреймов на странице.
- Макеты и пересчеты стилей в секунду.
Откройте панель монитора производительности.
Чтобы открыть панель «Монитор производительности» :
- Откройте Инструменты разработчика .
- Откройте командное меню, нажав:
- macOS: Command + Shift + P
- Windows, Linux, ChromeOS: Control + Shift + P.
- Начните вводить
Performance monitor, выберите « Показать монитор производительности» и нажмите Enter . DevTools отображает панель монитора производительности в нижней части окна DevTools.
Либо в правом верхнем углу выберите Дополнительные параметры > Дополнительные инструменты > Монитор производительности .
Использование панели «Монитор производительности»
Монитор производительности дает общее представление о производительности вашего веб-сайта во время выполнения.
Наблюдение за тем, как изменяются значения показателей при взаимодействии с веб-сайтом, может выявить возможности для улучшения.
Полезной особенностью монитора производительности является то, что он сохраняется на протяжении всей навигации по страницам. Таким образом, как внешний разработчик, вы можете избежать таких проблем, как сбой в макете , открыв монитор производительности , пролистывая их веб-сайт и следя за узлами DOM и показателями «Макет/сек» .
Если пользователи сообщают о медленной загрузке вашего сайта, монитор производительности может помочь вам выявить проблемные области.
Например, большой скачок использования ЦП может указывать на неэффективный код. И вообще, если страница содержит большое количество прослушивателей событий JS , возможно, будет полезно провести рефакторинг вашего кода и уменьшить это количество, чтобы освободить память.
Если вы только начинаете анализировать производительность, рекомендуется сначала использовать панель Lighthouse , а затем продолжить исследование с помощью панели «Производительность» или «Монитора производительности» .