Поделиться через


Измерение производительности страницы во время выполнения с помощью средства "Монитор производительности"

Используйте средство "Монитор производительности" , чтобы в режиме реального времени получить представление о производительности среды выполнения веб-страницы.

Средство "Монитор производительности " помогает определить, откуда возникают проблемы с производительностью. Существуют различные причины, по которым веб-сайт может работать медленно. Это средство позволяет понять, связаны ли проблемы с такими причинами:

  • Высокая загрузка памяти или ЦП.
  • Слишком частые вычисления макета и стиля.
  • Слишком много узлов DOM и прослушивателей событий.

Открытие средства "Монитор производительности"

Чтобы открыть средство "Монитор производительности ", выполните следующие действия:

  1. Чтобы открыть Средства разработки, щелкните веб-страницу правой кнопкой мыши и выберите пункт Проверить. Или нажмите клавиши CTRL+SHIFT+I (Windows, Linux) или COMMAND+OPTION+I (macOS). Откроется devTools.

  2. В средствах разработки на панели действий выберите вкладку Монитор производительности . Если эта вкладка не отображается, нажмите кнопку Другие инструменты (значок "):

Меню

На мониторе производительности отображаются графики различных метрик производительности, которые обновляются в режиме реального времени:

Как выглядит средство

Выбор метрик производительности для мониторинга

В средстве "Монитор производительности " по умолчанию отображаются три метрики производительности, а также доступны дополнительные метрики.

Метрика производительности Описание
Использование процессора Процент использования ЦП веб-страницей. Отображается по умолчанию.
Размер кучи JS Объем памяти, используемый программой JavaScript на странице. Отображается по умолчанию.
Узлы DOM Количество узлов DOM в браузере (по вкладкам). Отображается по умолчанию.
Прослушиватели событий JS Количество прослушивателей событий JavaScript в браузере (на разных вкладках).
Documents Количество объектов документов в браузере (по вкладкам).
Кадры документов Количество кадров документов в браузере (на разных вкладках).
Макеты в секунду Количество раз в секунду подсистема браузера создает макет страницы.
Пересчеты стилей в секунду Количество раз в секунду подсистема браузера вычисляет стиль CSS страницы.

Чтобы включить или отключить любые доступные метрики производительности, щелкните метки на боковой панели:

Боковая панель монитора производительности с различными метриками, которые можно переключить