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