Используйте панель «Производительность» для анализа производительности вашего сайта.
Обзор
Панель «Производительность» позволяет записывать профили производительности ЦП ваших веб-приложений. Анализируйте профили, чтобы найти потенциальные узкие места производительности и способы оптимизации использования ресурсов.
Используйте панель «Производительность» , чтобы сделать следующее:
- Запишите профиль производительности.
- Измените настройки захвата.
- Проанализируйте отчет о производительности.
Подробное руководство по повышению производительности вашего веб-сайта см. в разделе Анализ производительности во время выполнения .
Откройте панель «Производительность»
Чтобы открыть панель «Производительность» , откройте DevTools и выберите «Производительность» из набора вкладок вверху.
Альтернативно выполните следующие действия, чтобы открыть панель «Производительность» с меню «Команды» :
- Откройте Инструменты разработчика .
- Откройте командное меню, нажав:
- macOS: Command + Shift + P
- Windows, Linux, ChromeOS: Control + Shift + P.
- Начните вводить
Performance panel, выберите « Показать панель производительности» и нажмите Enter .
Запишите профиль производительности
Когда вы будете готовы к записи, панель Performance предоставит вам следующие возможности:
- Рекордная производительность во время выполнения
- Рекордная производительность нагрузки
- Делайте снимки экрана во время записи
- Принудительная сборка мусора во время записи
- Сохранить запись
- Загрузить запись
- Очистить запись
Изменить настройки захвата
Настройки захвата позволяют вам изменить способ захвата записей производительности DevTools и предоставить вам дополнительную информацию в отчете. Нажмите « параметров захвата» , чтобы получить доступ к меню настроек захвата .
Выберите следующие параметры в меню настроек съемки :
- Отключить образцы JavaScript : отключает запись стеков вызовов JavaScript, отображаемых на основной дорожке, которые вызываются во время записи. Уменьшит накладные расходы на производительность.
- Включить расширенные инструменты рисования (медленно) : захватывает расширенные инструменты рисования. Значительно снижает производительность.
- Включить статистику селектора CSS (медленно) : собирает статистику селектора CSS. Значительно снижает производительность.
- Регулирование ЦП : имитирует более медленную скорость ЦП.
- Регулирование сети : имитирует более медленную скорость сети.
- Аппаратный параллелизм : настройте значение, сообщаемое
navigator.hardwareConcurrency.
Анализ отчета о производительности
Подробное руководство по использованию панели «Производительность» см. в разделе «Анализ записи производительности» .
Ниже представлена группа тем из руководства, а также другая полезная документация:
Чтобы узнать, как перемещаться по отчету:
Чтобы узнать, как сосредоточиться на том, что важно для вашего рабочего процесса:
- Измените порядок треков и скройте их
- Скрыть функции и их дочерние элементы в диаграмме пламени
- Создавайте хлебные крошки и переключайтесь между уровнями масштабирования.
Чтобы узнать о вкладках «Снизу вверх», «Дерево вызовов» и «Журнал событий», выполните следующие действия:
Чтобы научиться анализировать отчет:
- Просмотр активности основной темы
- Прочитайте таблицу пламени
- Посмотреть скриншот
- Просмотр показателей памяти
- Просмотр продолжительности части записи
- Анализируйте производительность селектора CSS во время событий пересчета стиля.
- Профилируйте производительность Node.js с помощью панели «Производительность»
- Анализ кадров в секунду (FPS)
- Ссылка на событие временной шкалы
Улучшите производительность с помощью этих панелей
Откройте для себя другие панели, которые помогут вам улучшить производительность вашего сайта:
- Маяк: оптимизируйте скорость сайта
- Память: обзор панели памяти
- Статистика производительности: получите полезную информацию о производительности вашего веб-сайта.
- Рендеринг: обнаружение проблем с производительностью рендеринга.
- Проблемы: Найдите и устраните проблемы.
- Производительность: просмотр информации о слоях