Измерение производительности страницы во время выполнения с помощью средства "Монитор производительности"
Используйте средство "Монитор производительности" , чтобы в режиме реального времени получить представление о производительности среды выполнения веб-страницы.
Средство "Монитор производительности " помогает определить, откуда возникают проблемы с производительностью. Существуют различные причины, по которым веб-сайт может работать медленно. Это средство позволяет понять, связаны ли проблемы с такими причинами:
- Высокая загрузка памяти или ЦП.
- Слишком частые вычисления макета и стиля.
- Слишком много узлов DOM и прослушивателей событий.
Открытие средства "Монитор производительности"
Чтобы открыть средство "Монитор производительности ", выполните следующие действия:
Чтобы открыть Средства разработки, щелкните веб-страницу правой кнопкой мыши и выберите пункт Проверить. Или нажмите клавиши CTRL+SHIFT+I (Windows, Linux) или COMMAND+OPTION+I (macOS). Откроется devTools.
В средствах разработки на панели действий выберите вкладку Монитор производительности . Если эта вкладка не отображается, нажмите кнопку Другие инструменты (
"):
На мониторе производительности отображаются графики различных метрик производительности, которые обновляются в режиме реального времени:
Выбор метрик производительности для мониторинга
В средстве "Монитор производительности " по умолчанию отображаются три метрики производительности, а также доступны дополнительные метрики.
| Метрика производительности | Описание |
|---|---|
| Использование процессора | Процент использования ЦП веб-страницей. Отображается по умолчанию. |
| Размер кучи JS | Объем памяти, используемый программой JavaScript на странице. Отображается по умолчанию. |
| Узлы DOM | Количество узлов DOM в браузере (по вкладкам). Отображается по умолчанию. |
| Прослушиватели событий JS | Количество прослушивателей событий JavaScript в браузере (на разных вкладках). |
| Documents | Количество объектов документов в браузере (по вкладкам). |
| Кадры документов | Количество кадров документов в браузере (на разных вкладках). |
| Макеты в секунду | Количество раз в секунду подсистема браузера создает макет страницы. |
| Пересчеты стилей в секунду | Количество раз в секунду подсистема браузера вычисляет стиль CSS страницы. |
Чтобы включить или отключить любые доступные метрики производительности, щелкните метки на боковой панели:
