Справочник по характеристикам производительности

Оптимизируйте свои подборки Сохраняйте и классифицируйте контент в соответствии со своими настройками.

Kayce Basques

Sofia Emelianova

На этой странице представлен полный справочник функций Chrome DevTools, связанных с анализом производительности.

Ознакомьтесь с разделом Анализ производительности выполнения , чтобы получить пошаговое руководство по анализу производительности страницы с помощью Chrome DevTools.

Рекордная производительность

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

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

Записывайте производительность выполнения, если вы хотите проанализировать производительность страницы во время ее работы, а не во время загрузки.

1. Перейдите на страницу, которую вы хотите проанализировать.
2. Откройте вкладку «Производительность» в DevTools.

3. Нажмите «Запись». .

   

4. Взаимодействуйте со страницей. DevTools записывает все действия на странице, которые происходят в результате ваших взаимодействий.

5. Нажмите «Запись» еще раз или нажмите «Стоп» , чтобы остановить запись.

Рекордная производительность нагрузки

Записывайте производительность загрузки, если вы хотите проанализировать производительность страницы во время ее загрузки, а не во время ее работы.

1. Перейдите на страницу, которую вы хотите проанализировать.
2. Откройте панель «Производительность» DevTools.

3. Нажмите «Начать профилирование» и перезагрузите страницу. . DevTools сначала переходит к about:blank , чтобы очистить все оставшиеся скриншоты и трассировки. Затем DevTools записывает показатели производительности, пока страница перезагружается, а затем автоматически останавливает запись через пару секунд после завершения загрузки.

   

DevTools автоматически увеличивает масштаб той части записи, где происходила наибольшая активность.

В этом примере панель «Производительность» показывает активность во время загрузки страницы.

Делайте снимки экрана во время записи

Установите флажок «Снимки экрана» , чтобы делать снимки экрана каждого кадра во время записи.

Чтобы узнать, как взаимодействовать со снимками экрана, см. раздел Просмотр снимка экрана .

Принудительная сборка мусора во время записи

Во время записи страницы нажмите кнопку «Собрать мусор » , чтобы принудительно запустить сбор мусора.

Показать настройки записи

Нажмите «Настройки захвата». для отображения дополнительных настроек, связанных с тем, как DevTools фиксирует записи производительности.

Отключить примеры JavaScript

По умолчанию в Main track записи отображаются подробные стеки вызовов функций JavaScript, которые были вызваны во время записи. Чтобы отключить эти стеки вызовов:

1. Откройте настройки захвата. Меню. См. Показать настройки записи .
2. Установите флажок Отключить образцы JavaScript .
3. Сделайте запись страницы.

На следующих снимках экрана показана разница между отключением и включением образцов JavaScript. Основная дорожка записи намного короче, когда выборка отключена, поскольку она пропускает все стеки вызовов JavaScript.

В этом примере показана запись с отключенными образцами JS.

В этом примере показана запись с включенными образцами JS.

Ограничьте сеть во время записи

Чтобы ограничить сеть во время записи:

1. Откройте настройки захвата. Меню. См. Показать настройки записи .
2. Установите для сети выбранный уровень регулирования.

В раскрывающемся меню панели «Производительность» также может быть рекомендована предустановка регулирования по умолчанию или предустановка, которая приблизительно соответствует опыту ваших пользователей на основе полевых данных .

Уменьшение производительности ЦП во время записи

Чтобы замедлить работу ЦП во время записи:

1. Откройте настройки захвата. Меню. См. Показать настройки записи .
2. Установите ЦП на выбранный уровень регулирования.

Троттлинг зависит от возможностей вашего компьютера. Например, опция замедления 2x заставляет ваш процессор работать в 2 раза медленнее, чем обычно. DevTools не может по-настоящему симулировать процессоры мобильных устройств, поскольку архитектура мобильных устройств сильно отличается от архитектуры настольных компьютеров и ноутбуков.

В раскрывающемся меню панели «Производительность» также может быть рекомендована предустановка регулирования по умолчанию или предустановка, которая приблизительно соответствует опыту ваших пользователей на основе полевых данных .

Включить статистику селектора CSS

Чтобы просмотреть статистику селекторов правил CSS во время длительных событий пересчета стилей :

1. Откройте настройки захвата. Меню. См. Показать настройки записи .
2. Установите флажок Включить статистику селектора CSS .

Более подробную информацию см. в статье Анализ производительности селектора CSS во время событий пересчета стилей .

Включить расширенные инструменты для покраски

Для просмотра подробной информации о покрасочных приборах:

1. Откройте настройки захвата. Меню. См. Показать настройки записи .
2. Установите флажок Включить расширенные инструменты покраски .

Чтобы узнать, как взаимодействовать с информацией о краске, см. разделы Просмотр слоев и Просмотр профилировщика краски .

Аннотируйте запись и поделитесь ею

См. раздел Аннотирование и обмен результатами своей работы .

Очистить предыдущую запись

После записи нажмите «Очистить запись» . чтобы удалить эту запись с панели «Производительность» .

Анализ записи выступления

После записи производительности выполнения или загрузки панель «Производительность» предоставляет большой объем данных для анализа производительности того, что только что произошло.

Получите полезные идеи

Панель Performance объединяет аналитические данные о производительности из отчета Lighthouse и теперь устаревшей панели Performance insights . Эти аналитические данные могут подсказать способы повышения производительности и предоставить направленный анализ по следующим вопросам производительности, включая, но не ограничиваясь:

• LCP и INP по подразделам
• Обнаружение запроса LCP
• Виновники смещения макета
• Запросы на блокировку рендеринга
• Третьи лица
• Доставка изображения
• Задержка запроса документа
• Оптимизация области просмотра для мобильных устройств
• Стоимость селектора CSS
• Принудительная перекомпоновка
• Оптимизировать размер DOM
• Дерево сетевых зависимостей

Чтобы использовать идеи:

1. Сделайте запись выступления .
2. В левой боковой панели панели «Производительность» откройте вкладку « Инсайты» , разверните различные разделы, наведите курсор на элементы и щелкните их. Панель «Производительность» выделит соответствующие события в трассировке.

Навигация по записи

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

• Показывает вертикальный маркер, который охватывает всю кривую производительности при наведении курсора на обзор временной шкалы .
• Выделяет диапазон на временной шкале при наведении курсора на элементы на основной дорожке.

Чтобы внимательно изучить запись своего выступления, вы можете выбрать ее часть, прокрутить длинную диаграмму, увеличивать и уменьшать масштаб, а также использовать навигационную навигацию для переключения между уровнями масштабирования.

Используйте сочетания клавиш для навигации

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

В правом верхнем углу панели нажмите « Показать сочетания клавиш » и выберите один из следующих вариантов:

• Классический : масштабирование с помощью колесика мыши (вверх или вниз по сенсорной панели) и вертикальная прокрутка с помощью Shift + колесико мыши.
• Современный : вертикальная прокрутка колесиком мыши, горизонтальная прокрутка с помощью Shift + колесико мыши и масштабирование с помощью Command/Control + колесико мыши.

Диалоговое окно сочетаний клавиш также предоставляет вам шпаргалку по доступным сочетаниям клавиш.

Выберите часть записи

Под панелью действий панели «Производительность» и в верхней части записи вы можете увидеть раздел обзора временной шкалы с диаграммами ЦП и NET .

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

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

1. Сфокусируйтесь на главном треке или любом из его соседей.
2. Используйте клавиши W , A , S , D для увеличения масштаба, перемещения влево, уменьшения масштаба и перемещения вправо соответственно.

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

1. Наведите курсор на раздел обзора временной шкалы или на любую из дорожек ( главную и соседние).
2. Проведите двумя пальцами вверх, чтобы уменьшить масштаб, проведите влево, чтобы переместиться влево, проведите вниз, чтобы увеличить масштаб, и проведите вправо, чтобы переместиться вправо.

Создавайте навигационные цепочки и переключайтесь между уровнями масштабирования

Обзор временной шкалы позволяет последовательно создавать несколько вложенных навигационных цепочек, увеличивая уровни масштабирования, а затем свободно переключаться между уровнями масштабирования.

Чтобы создать и использовать хлебные крошки:

1. В обзоре временной шкалы выберите часть записи .
2. Наведите указатель мыши на выделение и нажмите кнопку N ms zoom_in . Выделение расширяется, заполняя обзор временной шкалы . Цепочка навигационных цепочек начинает выстраиваться в верхней части обзора временной шкалы .
3. Повторите предыдущие два шага, чтобы создать еще одну вложенную хлебную крошку. Вы можете продолжать вкладывать хлебные крошки, пока диапазон выбора больше 5 миллисекунд.
4. Чтобы перейти к выбранному уровню масштабирования, щелкните соответствующую навигационную цепочку в верхней части обзора временной шкалы .

Чтобы удалить дочерние элементы навигационной цепочки, щелкните правой кнопкой мыши родительскую навигационную цепочку и выберите Удалить дочерние навигационные цепочки .

Прокрутите длинную диаграмму пламени

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

Игнорировать нерелевантные скрипты в диаграмме пламени

Чтобы лучше сосредоточиться на своем коде, вы можете добавить ненужные скрипты в список игнорирования.

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

• Нажмите «Сжать» Показать диалоговое окно настроек списка игнорирования в верхней панели действий и введите регулярное выражение в поле ввода. Диаграмма пламени применит новое правило по мере ввода.
• Щелкните правой кнопкой мыши по скрипту и выберите Добавить скрипт в список игнорируемых . Панель «Производительность» добавляет этот скрипт в список в диалоговом окне « Показать параметры списка игнорируемых» .

Панель автоматически свернёт избыточную вложенность для таких скриптов и пометит их как On ignore list ( REGULAR_EXPRESSION ) .

В диалоговом окне « Показать настройки списка игнорирования» можно включать и отключать правила списка игнорирования.

Чтобы удалить скрипт из списка игнорируемых, щелкните его правой кнопкой мыши на диаграмме Flame и выберите Удалить скрипт из списка игнорируемых или наведите на него указатель мыши в диалоговом окне Показать параметры списка игнорируемых и щелкните Удалить .

DevTools сохраняет правила списка игнорирования, которые вы добавляете в настройках Настройки > Список игнорирования .

Кроме того, чтобы сосредоточиться только на скриптах первой стороны, установите флажок Dim 3rd parties . Панель Performance будет отображать сторонние скрипты серым цветом.

Поисковые действия

Вы можете осуществлять поиск по действиям в основном потоке и запросам в сетевом потоке.

Чтобы открыть поле поиска в нижней части панели «Производительность» , нажмите:

• macOS: Command + F
• Windows, Linux: Control + F

В этом примере показано регулярное выражение в поле поиска внизу, которое находит любую активность, начинающуюся с E

Для циклического просмотра действий, соответствующих вашему запросу:

• Нажмите кнопку « Назад» или « Далее» .
• Нажмите Shift + Enter , чтобы выбрать предыдущий вариант, или Enter, чтобы выбрать следующий вариант.

На панели «Производительность» отображается всплывающая подсказка над действием, выбранным в поле поиска.

Чтобы изменить настройки запроса:

• Нажмите match_case Учитывать регистр , чтобы сделать запрос чувствительным к регистру.
• Нажмите regular_expression Регулярное выражение , чтобы использовать регулярное выражение в вашем запросе.

Чтобы скрыть поле поиска, нажмите «Отмена» .

Изменить порядок треков и скрыть их

Чтобы навести порядок в трассировке производительности, можно изменить порядок дорожек и скрыть ненужные в режиме конфигурации дорожек.

Чтобы переместить и скрыть треки:

1. Чтобы войти в режим конфигурации, щелкните правой кнопкой мыши по названию дорожки и выберите «Настроить дорожки» .
2. Нажмите arrow_upward вверх или arrow_downward вниз, чтобы переместить трек вверх или вниз. Нажмите visible_off , чтобы скрыть его.
3. По завершении нажмите кнопку «Завершить настройку дорожек» внизу, чтобы выйти из режима конфигурации.

Посмотрите видео, чтобы увидеть этот рабочий процесс в действии.

Панель «Производительность» сохраняет конфигурацию дорожек для новых трассировок, но не в следующих сеансах DevTools.

Просмотреть основную активность в теме

Используйте основной трек для просмотра активности, произошедшей в основной теме страницы.

Щелкните событие, чтобы просмотреть дополнительную информацию о нем на вкладке «Сводка» , включая, помимо прочего: длительность (и собственную длительность), ссылку на соответствующую строку в исходном скрипте, исходный URL-адрес (с именем сущности, если известно), трассировку стека, если таковая имеется, и разбивку по времени в круговой диаграмме.

Панель «Производительность» выделяет выбранное событие синим цветом.

В этом примере показана дополнительная информация о событии вызова функции get на вкладке «Сводка» .

Различать события первой и третьей стороны

Чрезмерная зависимость от стороннего кода может негативно повлиять на производительность загрузки. Панель производительности может помочь вам визуально различать события первой и третьей стороны в трассировке, поэтому вы можете принять более обоснованное решение об уменьшении или отсрочке загрузки стороннего кода для приоритизации содержимого вашей страницы.

Чтобы сосредоточиться только на производительности кода собственной разработки:

1. Убедитесь, что в трассировке производительности или на вкладке Insights ничего не выбрано. Для этого щелкните пустое место в трассировке.
2. Установите флажок Dim 3rd parties в строке действий вверху. Панель Performance делает серым события, связанные со сторонними событиями, из трассировки производительности и оставляет выделенными только события first-party.

Выделите события с помощью таблицы «1-я/3-я сторона»

В пределах выбранного диапазона на обзоре временной шкалы и когда не выбрано ни одно событие, на вкладке «Сводка» отображается таблица 1-й/3-й стороны , в которой перечислены соответствующие размеры передачи и время основного потока для следующих событий:

• Первая сторона, отмеченная значком 1st party .
• Все обнаруженные сторонние объекты в выбранном диапазоне, неотмеченные.
• Расширения отмечены значками Extension .
• Другие [unattributed] сущности.

Чтобы увидеть связанные события, выделенные в трассировке, а остальные — серыми, наведите курсор на сущности в таблице. Чтобы оставить события сущности выделенными, выберите ее в таблице. Чтобы снять выделение, щелкните любое пустое место в трассировке.

Чтобы открыть действия, сгруппированные по этой сущности на вкладке «Снизу вверх» , наведите курсор на сущность в таблице и щелкните «account_tree» «Снизу вверх» рядом с ней.

Прочитайте диаграмму пламени

Панель производительности отображает активность основного потока в диаграмме пламени. Ось x отображает запись с течением времени. Ось y отображает стек вызовов. События сверху вызывают события снизу.

В этом примере показана диаграмма пламени в Main track. Событие click вызвало вызов анонимной функции. Эта функция, в свою очередь, вызвала onEndpointClick_ , которая вызвала handleClick_ и т. д.

Панель Performance назначает скриптам случайные цвета, чтобы разбить диаграмму пламени и сделать ее более читаемой. В предыдущем примере вызовы функций из одного скрипта окрашены в светло-голубой цвет. Вызовы из другого скрипта окрашены в светло-розовый цвет. Более темный желтый цвет представляет активность скрипта, а фиолетовое событие представляет активность рендеринга. Эти более темные желтые и фиолетовые события одинаковы во всех записях.

Длительные задачи также выделены красным треугольником, а часть, превышающая 50 миллисекунд, закрашена красным цветом:

В этом примере выполнение задачи заняло более 400 миллисекунд, поэтому часть, представляющая последние 350 миллисекунд, закрашена красным, а начальные 50 миллисекунд — нет.

Кроме того, на главном треке отображается информация о профилях ЦП, запущенных и остановленных с помощью консольных функций profile() и profileEnd() .

Чтобы скрыть подробную диаграмму пламени вызовов JavaScript, см . Отключение примеров JavaScript . Когда примеры JS отключены, вы видите только высокоуровневые события, такие как Event (click) и Function Call .

Отслеживать инициаторов событий

На главном треке можно отобразить стрелки, соединяющие следующие инициаторы и вызванные ими события:

• Аннулирование стиля или макета -> Пересчитать стили или макет
• Запросить кадр анимации -> Кадр анимации запущен
• Запросить обратный вызов при простое -> Активировать обратный вызов при простое
• Установить таймер -> Таймер сработал
• Создать WebSocket -> Отправить... и получить подтверждение WebSocket или уничтожить WebSocket
• Запланировать постзадачу -> Выполнить постзадачу или отменить постзадачу

Чтобы увидеть стрелки, найдите на диаграмме пламени инициатор или вызванное им событие и выберите его.

При выборе вкладка «Сводка» показывает ссылки «Инициатор» для инициаторов и ссылки «Инициировано» для событий, которые они вызвали. Щелкните их, чтобы перейти между соответствующими событиями.

Скрыть функции и их потомков в диаграмме пламени

Чтобы навести порядок на диаграмме пламени в главном потоке, можно скрыть выбранные функции или их дочерние элементы:

1. На главном треке щелкните правой кнопкой мыши функцию и выберите один из следующих вариантов или нажмите соответствующую комбинацию клавиш:

   • Скрыть функцию ( H )
   • Скрыть детей ( C )
   • Скрыть повторяющиеся дочерние элементы ( R )
   • Сбросить детей ( U )
   • Сброс трассировки ( T )
   • Добавить скрипт в список игнорируемых ( I )

   

   Рядом с именем функции со скрытыми дочерними элементами появляется кнопка раскрывающегося списка arrow_drop_down .

2. Чтобы увидеть количество скрытых дочерних элементов, наведите курсор на кнопку раскрывающегося списка arrow_drop_down .

   

3. Чтобы сбросить функцию со скрытыми дочерними элементами или всю диаграмму пламени, выберите функцию и нажмите U или щелкните правой кнопкой мыши любую функцию и выберите «Сбросить трассировку» соответственно.

Игнорировать скрипты в диаграмме пламени

Чтобы добавить скрипт в список игнорирования, щелкните правой кнопкой мыши скрипт на диаграмме и выберите Добавить скрипт в список игнорирования .

Диаграмма сворачивает игнорируемые скрипты, помечает их как В списке игнорирования и добавляет их в Пользовательские правила исключения в настройках Настройки > Список игнорирования . Игнорируемые скрипты сохраняются до тех пор, пока вы не удалите их либо из трассировки, либо из Пользовательских правил исключения .

Просмотр действий в таблице

После записи страницы вам не нужно полагаться исключительно на Main track для анализа действий. DevTools также предоставляет три табличных представления для анализа действий. Каждое представление дает вам другую перспективу действий:

• Если вы хотите просмотреть корневые действия, которые вызывают наибольшую работу, используйте вкладку «Дерево вызовов» .
• Если вы хотите просмотреть действия, на которые было потрачено больше всего времени, используйте вкладку «Снизу вверх» .
• Если вы хотите просмотреть действия в том порядке, в котором они происходили во время записи, используйте вкладку «Журнал событий» .

Чтобы помочь вам быстрее найти то, что вы ищете, на всех трех вкладках есть кнопки расширенной фильтрации рядом с панелью фильтров :

• match_case Соответствует регистру .
• regular_expression Регулярное выражение .
• match_word Соответствует целому слову .

Каждое табличное представление на панели Performance показывает ссылки на действия, такие как вызовы функций. Чтобы помочь вам в отладке, DevTools находит соответствующие объявления функций в исходных файлах. Кроме того, если соответствующие исходные карты присутствуют и включены, DevTools автоматически находит исходные файлы.

Щелкните ссылку, чтобы открыть исходный файл на панели «Источники» .

Корневая деятельность

Ниже приведено объяснение концепции корневых действий , упомянутой в разделах « Дерево вызовов », « Снизу вверх » и «Журнал событий» .

Корневые действия — это те, которые заставляют браузер выполнять некоторую работу. Например, когда вы нажимаете на страницу, браузер запускает действие Event как корневое действие. Затем это Event может вызвать выполнение обработчика.

В диаграмме пламени Main track корневые действия находятся в верхней части диаграммы. На вкладках Call Tree и Event log корневые действия являются элементами верхнего уровня.

Пример корневых действий см. на вкладке «Дерево вызовов» .

Вкладка «Дерево вызовов»

Используйте вкладку «Дерево вызовов», чтобы просмотреть, какие корневые действия вызывают наибольшую нагрузку.

Вкладка Call tree отображает только действия во время выбранной части записи. См. Select a part of a recording, чтобы узнать, как выбирать части.

В этом примере верхний уровень элементов в столбце Activity , например Event , Paint и Composite Layers являются корневыми действиями. Вложенность представляет стек вызовов. В этом примере Event вызвал Function Call , который вызвал button.addEventListener , который вызвал b , и так далее.

Self Time представляет собой время, непосредственно потраченное на эту деятельность. Total Time представляет собой время, потраченное на эту деятельность или любую из ее дочерних.

Нажмите «Собственное время» , «Общее время» или «Активность» , чтобы отсортировать таблицу по этому столбцу.

Используйте поле «Фильтр» для фильтрации событий по названию действия.

По умолчанию меню Группировка установлено на Нет группировки . Используйте меню Группировка для сортировки таблицы активности на основе различных критериев.

Вкладка «снизу вверх»

Используйте вкладку «Снизу вверх», чтобы просмотреть, какие действия в совокупности заняли больше всего времени.

Вкладка Bottom-up отображает только действия во время выбранной части записи. См. Выбор части записи, чтобы узнать, как выбирать части.

На диаграмме пламени Main track этого примера вы можете видеть, что почти все время было потрачено на выполнение трех вызовов wait() . Соответственно, верхняя активность на вкладке Bottom-up — это wait . На диаграмме пламени желтый цвет под вызовами wait на самом деле представляет собой тысячи вызовов Minor GC . Соответственно, вы можете видеть, что на вкладке Bottom-up следующей по затратам активностью является Minor GC .

Столбец «Время, затраченное на себя» отображает совокупное время, затраченное непосредственно на данную деятельность, по всем ее проявлениям.

Столбец «Общее время» отображает суммарное время, затраченное на данное действие или на любое из его дочерних действий.

Самый тяжелый стековый стол

В правой части вкладок «Дерево вызовов» или «Снизу вверх» щелкните right_panel_open Показать самый тяжелый стек , чтобы открыть таблицу «Самый тяжелый стек» .

В этой таблице показано, какие дочерние элементы выбранной активности заняли больше всего времени для выполнения. Наведите курсор на элемент в таблице, чтобы увидеть соответствующее событие, выделенное в Main Track, а остальные — затемненными.

Таким образом, вы можете визуально найти в трассировке производительности вложенные действия из стека вызовов, которые занимают больше всего времени.

Вкладка «Журнал событий»

Используйте вкладку «Журнал событий» для просмотра событий в том порядке, в котором они происходили во время записи.

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

Столбец Start Time представляет точку, в которой началась эта активность, относительно начала записи. Время начала 1573.0 ms для выбранного элемента в этом примере означает, что активность началась через 1573 мс после начала записи.

Столбец «Время, затраченное на самостоятельную деятельность» отображает время, затраченное непосредственно на данную деятельность.

Столбцы «Общее время» отображают время, затраченное непосредственно на данную деятельность или на любую из ее дочерних задач.

Нажмите «Время начала» , «Собственное время» или «Общее время», чтобы отсортировать таблицу по этому столбцу.

Используйте поле «Фильтр» для фильтрации действий по названию.

Используйте меню Длительность , чтобы отфильтровать все действия, которые заняли менее 1 мс или 15 мс. По умолчанию меню Длительность установлено на Все , что означает, что отображаются все действия.

Снимите флажки «Загрузка» , «Скриптинг» , «Рендеринг» или «Окраска» , чтобы отфильтровать все действия из этих категорий.

Посмотреть маркеры производительности

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

• Первая краска (FP)
• Первая контентная отрисовка (FCP)
• Самая большая содержательная краска (LCP)
• Событие DOMContentLoaded (DCL)
• Событие загрузки (L)

Наведите курсор на названия маркеров в нижней части трассы, чтобы увидеть их временную метку.

Посмотреть пользовательские тайминги

На шкале времени просматривайте свои собственные маркеры производительности, такие как:

• performance.mark() вызывает. Отдельная отметка с подсказкой показана ниже на 813,44 мс, помеченная как Starting to run JavaScript .
• вызовы performance.measure() . Желтый диапазон показан ниже, обозначенный как Slow Interaction .

Выберите маркер, чтобы увидеть больше подробностей на вкладке Summary , включая его временную метку, общее время, собственное время и объект detail . Для вызовов performance.mark() и performance.measure() на вкладке также отображаются трассировки стека.

Посмотреть взаимодействия

Просматривайте взаимодействия с пользователями на треке «Взаимодействия» , чтобы отслеживать потенциальные проблемы с реагированием.

Для просмотра взаимодействий:

1. Откройте DevTools , например, на этой демонстрационной странице .
2. Откройте панель «Производительность» и начните запись .
3. Кликните на элемент (кофе) и остановите запись.
4. Найдите трек «Взаимодействия» на временной шкале.

В этом примере трек Interactions показывает взаимодействие Pointer . У взаимодействий есть усы, которые указывают на задержки ввода и представления на границах времени обработки. Наведите указатель мыши на взаимодействие, чтобы увидеть подсказку с задержкой ввода, временем обработки и задержкой представления.

Трек взаимодействий также показывает предупреждения о взаимодействии для следующей отрисовки (INP) для взаимодействий длительностью более 200 миллисекунд на вкладке «Сводка» и в подсказке при наведении курсора:

Трек взаимодействий отмечает взаимодействия длительностью более 200 миллисекунд красным треугольником в правом верхнем углу.

Просмотр смен макета

Просмотр смещений макета на треке смещений макета . Смещения показаны в виде фиолетовых ромбов и сгруппированы в кластеры (фиолетовые линии) на основе их близости на временной шкале.

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

Чтобы просмотреть дополнительную информацию о смене или сменах макета на вкладке «Сводка» с указанием времени, оценок, элементов и потенциальных виновников, щелкните соответствующий ромб или кластер.

Для получения дополнительной информации см. раздел Накопительный сдвиг компоновки (CLS) .

Посмотреть анимацию

Просмотр анимаций на треке Анимации . Анимации именуются как соответствующие свойства CSS или элементы, если таковые имеются, например, transform или my-element . Некомпозитные анимации отмечены красными треугольниками в правом верхнем углу.

Выберите анимацию, чтобы увидеть более подробную информацию на вкладке «Сводка» , включая причины сбоев композиции.

Просмотр активности графического процессора

Просматривайте активность графического процессора в разделе «Графический процессор» .

Просмотр растровой активности

Просмотр растровой активности в разделе Thread Pool .

Анализ кадров в секунду (FPS)

DevTools предоставляет множество способов анализа кадров в секунду:

• Используйте раздел «Кадры» , чтобы посмотреть, сколько времени занял тот или иной кадр.
• Используйте счетчик FPS для оценки FPS в реальном времени при запуске страницы. См. Просмотр кадров в секунду в реальном времени с помощью счетчика FPS .

Раздел «Рамки»

Раздел «Кадры» показывает, сколько времени занял тот или иной кадр.

Наведите курсор на фрейм, чтобы увидеть подсказку с дополнительной информацией о нем.

В этом примере отображается подсказка при наведении курсора на фрейм.

Раздел «Рамки» может отображать четыре типа рамок:

1. Рамка без движения (белая) . Никаких изменений.
2. Рамка (зеленая) . Отрисовано как и ожидалось и вовремя.
3. Частично представленный кадр (желтый с редким широким штриховым рисунком) . Chrome сделал все возможное, чтобы отобразить хотя бы некоторые визуальные обновления вовремя. Например, в случае, если работа основного потока процесса рендеринга (анимация холста) запаздывает, а поток компоновщика (прокрутка) успевает.
4. Пропущенный кадр (красный с плотным сплошным рисунком) . Chrome не может отрисовать кадр за разумное время.

В этом примере отображается подсказка при наведении курсора на частично представленный кадр.

Щелкните фрейм, чтобы просмотреть еще больше информации о фрейме на вкладке «Сводка» . DevTools выделяет выбранный фрейм синим цветом.

Просмотр сетевых запросов

Разверните раздел «Сеть» , чтобы просмотреть каскад сетевых запросов, возникших во время записи выступления.

Рядом с названием сетевого трека находится легенда с цветовыми типами запросов.

Запросы на блокировку рендеринга отмечены красным треугольником в правом верхнем углу.

Наведите курсор на запрос, чтобы увидеть подсказку с:

• URL запроса и общее время, необходимое для его выполнения.
• Приоритет или изменение приоритета, например, Medium -> High .
• Является ли запрос Render blocking или нет.
• Разбивка по времени выполнения запросов описана ниже.

При нажатии на запрос сетевая дорожка рисует стрелку от его инициатора к запросу.

Кроме того, панель Performance показывает вам вкладку Summary с дополнительной информацией о запросе, включая, помимо прочего, поля Initial Priority и (final) Priority . Если их значения различаются, приоритет выборки запроса изменился во время записи. Для получения дополнительной информации см. Optimizing resource load with the Fetch Priority API .

На вкладке «Сводка» также отображается разбивка по времени выполнения запроса.

Запрос www.google.com представлен линией слева ( |– ), полосой посередине с темной и светлой частью и линией справа ( –| ).

Другую разбивку по времени можно найти на вкладке Сеть . Щелкните правой кнопкой мыши запрос в дорожке Сеть или его URL на вкладке Сводка и щелкните Показать на панели Сеть . DevTools перенесет вас на панель Сеть и выберет соответствующий запрос. Откройте его вкладку Время .

Вот как эти две разбивки соотносятся друг с другом:

• Левая строка ( |– ) — это все до группы событий Connection start включительно. Другими словами, это все до Request Sent .
• Светлая часть полосы — Request sent и Waiting for server response .
• Темная часть полосы — Content download .
• Правая строка ( –| ) — это время ожидания основного потока. На вкладке Сеть > Время ожидания его не видно.

Просмотр показателей памяти

Установите флажок Память , чтобы просмотреть показатели памяти с последней записи.

DevTools отображает новую диаграмму памяти над вкладкой Summary . Также есть новая диаграмма под диаграммой NET , называемая HEAP . Диаграмма HEAP предоставляет ту же информацию, что и линия JS Heap в диаграмме памяти .

В этом примере показатели памяти показаны над вкладкой «Сводка» .

Цветные линии на диаграмме соответствуют цветным флажкам над диаграммой. Отключите флажок, чтобы скрыть эту категорию из диаграммы.

На диаграмме отображается только выбранная область записи. В предыдущем примере диаграмма памяти показывает только использование памяти в начале записи, примерно до отметки 1000 мс.

Просмотр продолжительности части записи

При анализе раздела, например, Network или Main , иногда требуется более точная оценка того, сколько времени заняли определенные события. Удерживайте Shift, щелкните и удерживайте, а затем перетащите влево или вправо, чтобы выбрать часть записи. В нижней части вашего выбора DevTools показывает, сколько времени заняла эта часть.

В этом примере временная метка 488.53ms в нижней части выбранного фрагмента указывает, сколько времени занял этот фрагмент.

Посмотреть скриншот

Чтобы узнать, как включить функцию создания снимков экрана, см. раздел Создание снимков экрана во время записи .

Наведите обзор временной шкалы , чтобы просмотреть скриншот того, как смотрела страница в этот момент записи. Обзор временной шкалы - это раздел, который содержит процессор , FPS и чистые диаграммы.

Вы также можете просмотреть скриншоты, нажав на кадр в разделе кадров . Devtools отображает небольшую версию скриншота на вкладке «Сводка» .

В этом примере показан снимок экрана для кадры 195.5ms на вкладке «Сводка» , когда вы нажимаете по нему в разделе кадров .

Нажмите на миниатюру на вкладке «Сводка» , чтобы увеличить скриншот.

В этом примере показан снимок экрана с увеличением после того, как вы нажимаете на его миниатюру на вкладке «Сводка» .

Просмотреть информацию о слоях

Чтобы просмотреть информацию о расширенном уровнях о кадре:

1. Включить передовые приборы для окраски .
2. Выберите кадр в разделе кадров . Devtools отображает информацию о своих слоях на вкладке «Новые слои» рядом с вкладкой журнала событий .

Введите на слой, чтобы выделить его на диаграмме.

В этом примере показан слой № 39, выделенный, когда вы наклоняете его.

Чтобы переместить диаграмму:

• Нажмите режим PAN Перемещать по осям x и y.
• Нажмите режим вращения повернуть вдоль оси Z.
• Нажмите «Сбросить преобразование» сбросить диаграмму в исходную позицию.

См. Анализ слоев в действии:

Посмотреть Paint Profiler

Чтобы просмотреть расширенную информацию о событии краски:

1. Включить передовые приборы для окраски .
2. Выберите событие краски в основной дорожке.

Проанализировать производительность рендеринга с помощью вкладки рендеринга

Используйте функции вкладки рендеринга , чтобы помочь визуализировать производительность рендеринга вашей страницы.

Откройте вкладку рендеринга .

Просмотреть кадры в секунду в режиме реального времени с счетчиком FPS

Статистика рендеринга кадров -это наложение, которое появляется в верхнем правом углу вашего просмотра. Это обеспечивает оценку FPS в реальном времени, когда на странице работает.

См. Статистику кадров .

Посмотреть события живописи в режиме реального времени с мигающей краской

Используйте краску, мигающую, чтобы просмотреть все события краски на странице в реальном времени.

Смотрите краску, мигающую .

Посмотреть наложение слоев с границами слоев

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

Смотрите границы слоя .

Найдите проблемы с производительностью прокрутки в режиме реального времени

Используйте проблемы с производительностью прокрутки , чтобы определить элементы страницы, на которых слушатели событий связаны с прокруткой, которые могут нанести вред производительности страницы. Devtools описывает потенциально процветающие элементы в бирете.

Смотрите проблемы с прокруткой производительности .

Kayce Basques

Sofia Emelianova

Эта страница является полной ссылкой на функции Chrome Devtools, связанные с анализом производительности.

См. Проанализируйте производительность времени выполнения для руководства по гибели о том, как проанализировать производительность страницы с использованием Chrome Devtools.

Рекордная производительность

Вы можете записать время выполнения или нагрузку.

Запись времени выполнения

Запишите производительность выполнения, когда вы хотите проанализировать производительность страницы во время ее работы, в отличие от загрузки.

1. Перейдите на страницу, которую вы хотите проанализировать.
2. Нажмите на вкладку Performance в Devtools.

3. Нажмите «Запись» .

   

4. Взаимодействуйте с страницей. Devtools записывает все действия страниц, которые возникают в результате вашего взаимодействия.

5. Нажмите «Запись» еще раз или нажмите «Остановить» , чтобы прекратить запись.

Производительность загрузки записи

Производительность загрузки, если вы хотите проанализировать производительность страницы при загрузке, в отличие от работы.

1. Перейдите на страницу, которую вы хотите проанализировать.
2. Откройте Performance Panel of Devtools.

3. Нажмите на страницу «Начать профилирование и перезагрузку» Полем DevTools сначала перемещается по about:blank чтобы очистить оставшиеся снимки экрана и следы. Затем Devtools записывает метрики производительности, пока страница перезагружается, а затем автоматически останавливает запись через пару секунд после завершения загрузки.

   

Devtools автоматически увеличивает часть части записи, где произошла большая часть активности.

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

Занимайте скриншоты во время записи

Включите флажок экрана , чтобы зафиксировать скриншот каждого кадра во время записи.

См. Просмотреть скриншот, чтобы узнать, как взаимодействовать с скриншотами.

Сборник мусора силой во время записи

Пока вы записываете страницу, нажмите «Соберите мусорную швабру» , чтобы принудительно сбора мусора.

Показать настройки записи

Нажмите настройки захвата Чтобы разоблачить больше настроек, связанных с тем, как DevTools фиксирует записи производительности.

Отключить образцы JavaScript

По умолчанию основной трек записи отображает подробные стеки вызовов функций JavaScript, которые были вызваны во время записи. Чтобы отключить эти стеки вызовов:

1. Откройте настройки захвата меню. Смотрите настройки записи шоу .
2. Включите флажок отключить выборочный флажок JavaScript .
3. Сделайте запись страницы.

Следующие скриншоты показывают разницу между отключением и включением образцов JavaScript. Основной трек записи намного короче при отключении отбора проб, потому что он опускает все стеки вызовов JavaScript.

В этом примере показана запись с отключенными образцами JS.

В этом примере показана запись с включенными образцами JS.

Дроссель сеть во время записи

Чтобы занять сеть во время записи:

1. Откройте настройки захвата меню. Смотрите настройки записи шоу .
2. Установите сеть на выбранном уровне дросселирования.

В раскрывающемся меню панель Performance может также рекомендовать предустановку дроссельной дросселирования по умолчанию или предустановку, которая приближается к опыту ваших пользователей на основе полевых данных .

Дроссельная заслонка процессора во время записи

Чтобы занять процессор во время записи:

1. Откройте настройки захвата меню. Смотрите настройки записи шоу .
2. Установите ЦП на выбранном уровне дросселирования.

Дросселение относится к возможностям вашего компьютера. Например, вариант 2x замедления делает ваш процессор работать в 2 раза медленнее, чем его обычная способность. Devtools не может по -настоящему имитировать процессоры мобильных устройств, потому что архитектура мобильных устройств сильно отличается от архитектуры настольных компьютеров и ноутбуков.

В раскрывающемся меню панель Performance может также рекомендовать предустановку дроссельной дросселирования по умолчанию или предустановку, которая приближается к опыту ваших пользователей на основе полевых данных .

Включить статистику селектора CSS

Чтобы просмотреть статистику ваших селекторов правил CSS во время продолжительных событий в стиле переиздания :

1. Откройте настройки захвата меню. Смотрите настройки записи шоу .
2. Проверьте флажок «Включить статистику CSS» .

Для получения более подробной информации, см. Как проанализировать производительность селектора CSS во время пересчетных событий в стиле .

Включить передовые приборы для окраски

Чтобы просмотреть подробные инструменты для окраски:

1. Откройте настройки захвата меню. Смотрите настройки записи шоу .
2. Проверьте флажок «Включить расширенный флажок» .

Чтобы узнать, как взаимодействовать с информацией о краске, см. Просмотр слоев и просмотреть Paint Profiler .

Аннотировать запись и поделитесь ее

Смотрите аннотируйте и поделитесь своими выводами производительности .

Очистить предыдущую запись

После записи нажмите Clear Recording Чтобы очистить эту запись с панели Performance .

Проанализировать запись производительности

После того, как вы записываете производительность времени выполнения или производительность загрузки записи , Performance Panel предоставляет много данных для анализа производительности того, что только что произошло.

Получите действенное понимание

Панель Performance консолидирует представление о производительности из отчета о маяке и теперь устаревшей панели Performance Insights . Эти идеи могут предложить способы повышения производительности и обеспечить анализ руководства по следующим вопросам эффективности, включая, помимо прочего,:

• LCP и INP по подразделению
• LCP запрос обнаружения
• Выполнители смены макета
• Запросы на блокирование
• Третьи лица
• Доставка изображений
• Задержка запроса документа
• Оптимизация Viewport для мобильных
• CSS Селекторные затраты
• Принудительный переиз
• Оптимизируйте размер DOM
• Сетевое дерево зависимостей

Чтобы использовать понимание:

1. Сделайте запись производительности .
2. На левой боковой панели панели Performance откройте вкладку Insights , разверните разные разделы, нажимайте и нажмите элементы. Панель производительности будет выделять соответствующие события в трассировке.

Навигация по записи

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

• Показывает вам вертикальный маркер, который охватывает весь след производительности, когда вы падаете над обзором временной шкалы .
• Подчеркивает диапазон в обзоре временной шкалы, когда вы падаете над элементами в основном треке.

Чтобы внимательно проверить свою запись производительности, вы можете выбрать часть записи, прокрутить длинную диаграмму пламени, увеличить и выходить в голову и использовать хлебные крошки, чтобы прыгать между уровнями масштабирования.

Используйте сочетания клавиш для навигации

Чтобы использовать сочетания клавиш для быстрого навигации по записи, сначала выберите свой предпочтительный стиль навигации клавиатуры.

В правом верхнем углу панели нажмите «Помощь Показать» Показать ярлыки и выберите один из следующих:

• Классика : масштаб с колесом мыши (сенсорная панель вверх или вниз) и вертикальная прокрутка с помощью колеса Shift + мыши.
• Современный : вертикальная прокрутка с колесом мыши, горизонтальная прокрутка со сдвигом + колесо мыши и масштабирование с командой/управлением + колесом мыши.

Диалог ярлыков также предоставляет вам лист доступных ярлыков.

Выберите часть записи

Под строкой действий панели Performance и в верхней части записи вы можете увидеть раздел обзора временной шкалы с ЦП и чистыми диаграммами.

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

Чтобы выбрать порцию, используя клавиатуру:

1. Сосредоточьтесь на главном треке или любого из его соседей.
2. Используйте клавиши W , A , S , D , чтобы увеличить, двигаться влево, масштабировать и двигаться вправо соответственно.

Чтобы выбрать часть, используя трекпад:

1. Нависнуть над разделом обзора временной шкалы или любых треков ( Main и его соседей).
2. Используя два пальца, проведите, чтобы увеличить масштаб, проведите влево, чтобы двигаться влево, проведите вниз, чтобы увеличить масштаб и проведите направо, чтобы двигаться вправо.

Создать панировочные сухари и прыгать между уровнями масштабирования

Обзор временной шкалы позволяет создавать несколько вложенных сухарей подряд, повышать уровень масштабирования, а затем свободно прыгать между уровнями масштабирования.

Чтобы создать и использовать хлебные крошки:

1. В обзоре временной шкалы выберите часть записи .
2. Введите на выбор и нажмите кнопку n ms Zoom_in . Выбор расширяется, чтобы заполнить обзор временной шкалы . Цепочка панировочных сухарей начинает строить на вершине обзора временной шкалы .
3. Повторите два предыдущих двух шага, чтобы создать еще один вложенный хлебный крошка. Вы можете продолжать гнездовать сухари, пока диапазон отбора превышает 5 миллисекунд.
4. Чтобы перейти к выбранному уровню масштабирования, нажмите на соответствующий хлебный камер в цепочке в верхней части обзора временной шкалы .

Чтобы удалить ребенка из хлебной крошки, щелкните правой кнопкой мыши родительский хлебник и выберите «Удалить детские сухари» .

Прокрутите длинную диаграмму пламени

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

Игнорировать нерелевантные сценарии на пламене

Чтобы лучше сосредоточиться на вашем коде, вы можете добавить неактуальные сценарии, чтобы игнорировать список.

Чтобы игнорировать сценарии, сделайте одно из следующих:

• Нажмите Compress Show Ingenare Difaters Settings в верхней панели действий и введите регулярное выражение в поле ввода. Диаграмма Flame будет применять новое правило при вводе.
• Щелкните правой кнопкой мыши сценарий и выберите «Добавить скрипт», чтобы игнорировать список . Панель Performance добавляет этот скрипт в список в диалоговом окне « Show Show Show» .

Панель автоматически разрушит чрезмерное гнездование для таких сценариев и отмечать их как On ignore list ( REGULAR_EXPRESSION ) .

В диалоговом окне «Show Show Show» игнорируется , вы можете включить и выключить правила списка игнорирования.

Чтобы удалить сценарий из списка игнорирования, щелкните правой кнопкой мыши его в диаграмме Flame и выберите «Удалить скрипт» из списка игнорирования или наведите его в диалоговом окне «Сжатие» «Список» , и нажмите «Удалить » .

Devtools сохраняет правила списка игнорирования, которые вы добавляете в настройки настройки > Игнорировать список .

Кроме того, чтобы сосредоточиться только на первых сценариях, проверьте проверку check_box Dim 3-й стороны . Производительная панель будет отрываться от сторонних сценариев.

Поисковые действия

Вы можете искать действия в основном треке и запросах в сетевой дорожке.

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

• macOS: команда + f
• Windows, Linux: Control + F

Этот пример показывает регулярное выражение в поле поиска внизу, которое находит любую деятельность, которая начинается с E .

Чтобы переехать через действия, которые соответствуют вашему запросу:

• Нажмите expand_less предыдущий или expand_more Next Blotons.
• Нажмите Shift + Enter , чтобы выбрать предыдущий или введите , чтобы выбрать следующее.

Панель Performance показывает всплывающую подсказку над действием, выбранной в поле поиска.

Чтобы изменить настройки запроса:

• Нажмите CASE MATCH_CASE MATCH, чтобы сделать чехл запроса чувствительным.
• Щелкните Rigation_expression Regular Spreg , чтобы использовать регулярное выражение в вашем запросе.

Чтобы скрыть окно поиска, нажмите Cancel .

Изменить порядок треков и скрыть их

Чтобы ослабить трассировку производительности, вы можете изменить порядок треков и скрыть нерелевантные в режиме конфигурации трека.

Перемещать и скрыть треки:

1. Чтобы ввести режим конфигурации, щелкните правой кнопкой мыши имя дорожки и выберите «Настроить треки» .
2. Нажмите arrow_upward вверх или arrow_downward вниз, чтобы переместить дорожку вверх или вниз. Нажмите на visibbe_off , чтобы скрыть это.
3. По завершении нажмите «Закончить настройку треков» внизу, чтобы выйти из режима конфигурации.

Посмотрите видео, чтобы увидеть этот рабочий процесс в действии.

Панель Performance сохраняет конфигурацию трека для новых трассов, но не в следующих сеансах Devtools.

Просмотреть активность основного потока

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

Нажмите на событие, чтобы просмотреть дополнительную информацию о нем на вкладке «Сводка» , включая, помимо прочего: продолжительность (и самостоятельность), ссылку на соответствующую строку в сценарии источника, URL Origin (с именем объекта, если известно) Stack Trace, если таковые имеются, и срыв сроков в круговой диаграмме.

Производительная панель описывает выбранное событие в синем.

В этом примере показано больше информации о событии вызова функции get на вкладке «Сводка» .

Различать события первой и третьей стороны

Чрезмерная зависимость от стороннего кода партии может негативно повлиять на производительность загрузки. Панель Performance может помочь вам визуально различать события первой и третьей стороны в трассировке, поэтому вы можете принять более информированное решение о сокращении или отложении загрузки стороннего кода для определения приоритетов содержания вашей страницы.

Сосредоточиться только на производительности первого кода:

1. Убедитесь, что ничего не выбрано в трассировке производительности или на вкладке Insights . Для этого нажмите на пустое пространство в трассировке.
2. Проверьте check_box Dim 3 -й стороны в панели действий в верхней части. Панель Performance Grays Out сторонних событий из The Performance Trace и оставляет только первую личную подставку.

Выделите события с таблицей «1 -й / 3 -й стороны»

В пределах выбранного диапазона по обзору временной шкалы и когда ни одно из событий не выбран, вкладка «Сводка» показывает таблицу 1 -й / 3 -й стороны , в которой перечислены соответствующие размеры передачи и основные времена потока следующего:

• Первозависимая сущность отмечена 1st party значкой.
• Все обнаруженные сторонние организации в выбранном диапазоне без опознавательных знаков.
• Расширения отмечены значками Extension .
• Другие [unattributed] сущности.

Чтобы увидеть связанные события, выделенные в трассировке, а остальные отрываются, нависните над сущностями в таблице. Чтобы оставить события субъекта выделены, выберите его в таблице. Чтобы удалить выделение, нажмите на любое пустое пространство в трассировке.

Чтобы открыть действия, сгруппированные по этой сущности на вкладке «Низье вверх» , наведите на себя объект в таблице и нажмите account_tree снизу вверх рядом с ним.

Прочитайте пламя

Панель производительности представляет основную активность потока в пламенной диаграмме. Ось X представляет запись с течением времени. Ось Y представляет стек вызовов. События сверху вызывают события ниже.

В этом примере показана диаграмма пламени в главной дороге. Событие click вызвало анонимный вызов функции. Эта функция, в свою очередь, называется onEndpointClick_ , которая называется handleClick_ и так далее.

Панель Performance присваивает сценарии случайных цветов, чтобы разбить диаграмму пламени и сделать ее более читабельным. В более раннем примере вызовы функций из одного скрипта окрашены в светло -голубой. Звонки из другого сценария цветные светло -розовые. Темный желтый представляет собой сценарию, а фиолетовое событие представляет собой рендеринговую деятельность. Эти темные желтые и фиолетовые события последовательны во всех записях.

Длинные задачи также выделены красным треугольником, а часть более 50 миллисекунд затенена в красном:

В этом примере задача заняла более 400 миллисекунд, поэтому часть, представляющая последние 350 миллисекунд, затенена красной, а начальные 50 миллисекунд - нет.

Кроме того, в основном треке показана информация о профилях ЦП, запускаемой и остановлена ​​с помощью функций profile() и profileEnd() .

Чтобы скрыть подробную диаграмму пламени JavaScript, см . Отключите образцы JavaScript . Когда образцы JS отключены, вы видите только события высокого уровня, такие как Event (click) и Function Call .

Отслеживание событий

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

• Стиль или схема неверно -> пересчитывать стили или макет
• Запросить анимационную рамку -> анимационная рамка
• Запрос на холостое обратное вызов -> Огненное обратное вызов.
• Установите таймер -> Timer стрелял
• Создайте WebSocket -> Отправить ... и получить рукопожатие WebSocket или уничтожить WebSocket
• Расписание PostTask -> Fire Posttask или Abort PostTask

Чтобы увидеть стрелки, найдите либо инициатор, либо событие, которое он вызвал в таблице пламени, и выберите его.

При выборе вкладка «Сводка» показывает инициатор для ссылок для инициаторов и инициированных ссылками для событий, которые они вызвали. Нажмите на них, чтобы прыгнуть между соответствующими событиями.

Скрыть функции и их детей в пламени

Чтобы развеять диаграмму огня в главном потоке, вы можете скрыть выбранные функции или их детей:

1. В основном дорожке щелкните правой кнопкой мыши функцию и выберите один из следующих параметров или нажмите соответствующий ярлык:

   • Скрыть функцию ( H )
   • Скрыть детей ( C )
   • Скрыть повторения детей ( R )
   • Сбросить детей ( U )
   • Сбросить трассировку ( T )
   • Добавить скрипт, чтобы игнорировать список ( I )

   

   Рядом с именем функции появляется кнопка раскрываемости arrow_drop_down .

2. Чтобы увидеть количество скрытых детей, наведите на кнопку раскрываемости arrow_drop_down .

   

3. Чтобы сбросить функцию со скрытыми детьми или всей диаграммой пламени, выберите функцию и нажмите U или щелкните правой кнопкой мыши любую функцию и выберите «Сбросить трассу» соответственно.

Игнорировать сценарии в пламени

Чтобы добавить скрипт в список игнорирования, щелкните правой кнопкой мыши сценарий на графике и выберите «Добавить скрипт», чтобы игнорировать список .

Диаграмма обрушивается игнорируемые сценарии, отмечает их в списке игнорирования и добавляет их в пользовательские правила исключения в настройках настройки> Игнорировать список . Игнорированные сценарии сохраняются до тех пор, пока вы не удалите их либо из трассировки, либо из пользовательских правил исключения .

Просмотреть действия в таблице

После записи страницы вам не нужно полагаться исключительно на основной трек для анализа действий. Devtools также предоставляет три табличного представления для анализа деятельности. Каждое представление дает вам разные взгляды на деятельность:

• Если вы хотите просмотреть корневые действия, которые вызывают наибольшую работу, используйте вкладку Tree Tree .
• Если вы хотите просмотреть действия, где больше всего было потрачено наибольшее время, используйте вкладку снизу вверх .
• Если вы хотите просмотреть действия в том порядке, в котором они произошли во время записи, используйте вкладку журнала событий .

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

• Матч -карт совместный корпус .
• Регулярное регулярное выражение .
• match_word совпадать с целым словом .

Каждое табличное представление на панели производительности показывает ссылки для таких действий, как вызовы функций. Чтобы помочь вам отладить, Devtools находит соответствующие объявления функции в исходных файлах. Кроме того, если присутствуют и включены соответствующие исходные карты , DevTools автоматически находит исходные файлы.

Нажмите на ссылку, чтобы открыть исходный файл на панели источников .

Корневая деятельность

Вот объяснение концепции корневой деятельности , которая упоминается на вкладке Tree Tree , вкладке «Восходящее вверх » и «Разделы журнала событий» .

Корневая деятельность - это те, которые заставляют браузер выполнять некоторую работу. Например, когда вы нажимаете на страницу, браузер запускает активность Event в качестве корневой деятельности. Это Event может привести к выполнению обработчика.

В графике пламени основной трассы корневые действия находятся на вершине диаграммы. На вкладках дерева вызовов и журналов событий корневые действия являются элементами верхнего уровня.

Смотрите вкладку Tree Tree для примера корневой деятельности.

Вкладка «Трево звонка»

Используйте вкладку Tree Tree, чтобы просмотреть, какие корневые действия вызывают наибольшую работу.

Вкладка «Дерево вызовов» отображает только действия во время выбранной части записи. См. Выберите часть записи, чтобы узнать, как выбрать части.

В этом примере верхний уровень элементов в столбце деятельности , таких как Event , Paint и Composite Layers являются корневыми действиями. Гнездование представляет стек вызовов. В этом примере Event вызвало Function Call , который b button.addEventListener .

Самостоятельное время представляет время, проведенное непосредственно в этой деятельности. Общее время представляет время, проведенное в этой деятельности или любого из ее детей.

Нажмите «Самостоятельное время» , «Общее время» или «Заявление» , чтобы сортировать таблицу по этому столбцу.

Используйте поле фильтра , чтобы фильтровать события по имени деятельности.

По умолчанию меню группировки не подходит для группировки . Используйте меню группировки , чтобы сортировать таблицу деятельности на основе различных критериев.

Вкладка «снизу вверх»

Используйте вкладку «снизу вверх», чтобы просмотреть, какие действия напрямую заняли больше времени в совокупности.

Вкладка «Низье вверх» отображает только действия во время выбранной части записи. См. Выберите часть записи, чтобы узнать, как выбрать части.

В основной графике пламени этого примера вы можете видеть, что почти все время было потрачено на выполнение трех вызовов для wait() . Соответственно, верхняя активность на вкладке «Низье вверх» -это wait . В таблице пламени желтый ниже призывы wait на самом деле тысячи Minor GC . Соответственно, вы можете видеть, что на вкладке «Восзалось» , следующим наиболее дорогим занятием является Minor GC .

Столбец Self Time представляет собой агрегированное время, проведенное непосредственно в этой деятельности, во всех ее случаях.

Общий столбец времени представляет агрегированное время, проведенное в этой деятельности или любого из ее детей.

Тяжелая таблица стека

На правой стороне дерева вызовов или вкладок снизу вверх нажмите right_panel_open Показать самый тяжелый стек , чтобы показать самый тяжелый таблицу стека .

Эта таблица показывает вам, какие дети выбранной деятельности потребовалось самое длительное время для выполнения. Нависните над предметом в таблице, чтобы увидеть соответствующее событие, выделенное в главном треке, а остальные погрузились.

Таким образом, вы можете визуально найти в просмотре производительности вложенных действий из стека вызовов, которые занимают больше всего времени.

Вкладка журнала событий

Используйте вкладку журнала событий , чтобы просмотреть действия в порядке, в котором они произошли во время записи.

Вкладка «Журнал событий» отображает только действия во время выбранной части записи. См. Выберите часть записи, чтобы узнать, как выбрать части.

Столбец времени начала представляет точку, с которой началась эта деятельность, относительно начала записи. Время начала 1573.0 ms для выбранного элемента в этом примере означает, что активность началась 1573 мс после начала записи.

Столбец Self Time представляет время, проведенное непосредственно в этой деятельности.

Общие столбцы времени представляют время, проведенное непосредственно в этой деятельности или у любого из ее детей.

Нажмите время начала , самого времени или общее время, чтобы сортировать таблицу по этому столбцу.

Используйте поле фильтра , чтобы фильтровать действия по имени.

Используйте меню «Продолжительность» , чтобы отфильтровать любые действия, которые заняли менее 1 мс или 15 мс. По умолчанию меню «Продолжительность» установлено на все , что означает, что все действия показаны.

Отключите флажки загрузки , сценариев , рендеринга или рисования , чтобы отфильтровать все действия из этих категорий.

Просмотреть маркеры производительности

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

• Первая краска (FP)
• Первая довольная краска (FCP)
• Самая большая довольная краска (LCP)
• Domcontentloaded Event (DCL)
• Событие Onload (L)

Нависните над именами маркеров внизу трассировки, чтобы увидеть их временную метку.

Просмотреть пользовательские времена

На треке Timings просмотрите свои пользовательские маркеры производительности, такие как:

• performance.mark() вызовы. Индивидуальная отметка с подъемом инструментов показана ниже при 813,44 мс, помеченная начала запускать JavaScript .
• performance.measure() вызовы. Желтый пролет показан ниже, помеченный медленному взаимодействию .

Выберите маркер, чтобы увидеть более подробную информацию на вкладке «Сводка» , включая его временной меткой, общее время, самообслуживание и объект detail . Для вызовов performance.mark() и performance.measure() на вкладке также показаны следы стека.

Просмотреть взаимодействия

Просмотреть взаимодействия с пользователями на пути взаимодействия , чтобы отслеживать потенциальную проблему отзывчивости.

Для просмотра взаимодействия:

1. Откройте Devtools , например, на этой демо -странице .
2. Откройте Performance Panel и запустите запись .
3. Нажмите на элемент (кофе) и остановите запись.
4. Найдите трек взаимодействий на временной шкале.

В этом примере трек взаимодействий показывает взаимодействие указателя . Взаимодействия имеют усы, которые указывают на задержки ввода и презентации в границах времени обработки. Наведите на взаимодействие, чтобы увидеть всплывающую подсказку с задержкой ввода, временем обработки и задержкой презентации.

Трек взаимодействий также показывает предупреждения о взаимодействии с следующей краской (INP) для взаимодействий более 200 миллисекунд на вкладке «Сводка» и в подсказке на Hover:

Трек взаимодействий отмечает взаимодействие более 200 миллисекунд с красным треугольником в правом верхнем углу.

Посмотреть смены макета

Просмотреть смены макета на треке смены макета . Сдвиги показаны как фиолетовые бриллианты и сгруппированы в кластеры (фиолетовые линии) на основе их близости на временной шкале.

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

Чтобы увидеть больше информации о сдвиге макета или смены на вкладке «Сводка» с временем, оценками, элементами и потенциальными виновниками, щелкните соответствующий алмаз или кластер.

Для получения дополнительной информации см. Совокупный сдвиг макета (CLS) .

Просмотреть анимации

Просмотреть анимации на треке анимации . Анимации называются соответствующими свойствами или элементами CSS, если таковые имеются, например, transform или my-element . Не совместимые анимации отмечены красными треугольниками в правом верхнем углу.

Выберите анимацию, чтобы увидеть более подробную информацию на вкладке «Сводка» , включая причины сбоев композиции.

Посмотреть активность графического процессора

Просмотреть активность графического процессора в разделе GPU .

Посмотреть растровую деятельность

Посмотреть растровые активности в разделе пула потоков .

Анализировать кадры в секунду (FPS)

Devtools предоставляет многочисленные способы анализа кадров в секунду:

• Используйте раздел кадров , чтобы просмотреть, как долго занялась конкретная кадр.
• Используйте счетчик FPS для оценки FPS в реальном времени, когда запускается страница. Смотрите кадры View в секунду в режиме реального времени с счетчиком FPS .

Раздел кадров

В разделе кадров рассказывается, как долго занимал конкретный кадр.

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

В этом примере показан подсказка, когда вы падаете над кадром.

В разделе кадров могут показаны четыре типа кадров:

1. Холодный кадр (белый) . Нет изменений.
2. Рама (зеленый) . Выполнен, как и ожидалось и со временем.
3. Частично представлена ​​рама (желтый с редким широким рисунком линии линии) . Chrome сделал все возможное, чтобы представить хотя бы некоторые визуальные обновления во времени. Например, в случае, если работа основного потока процесса рендеринга (анимация Canvas) опоздала, но поток композитора (прокрутка) со временем.
4. Убранная рама (красная с плотной твердотельной картиной) . Chrome не может представить кадр в разумное время.

В этом примере показан подсказка, когда вы падаете над частично представленным кадром.

Нажмите на кадр, чтобы просмотреть еще больше информации о кадре на вкладке «Сводка» . Devtools описывает выбранную раму синим.

Просмотреть сетевые запросы

Разверните сетевой раздел, чтобы просмотреть водопад сетевых запросов, которые произошли во время записи производительности.

Рядом с именем сети , есть легенда с типами запросов с цветовой кодировкой.

Запросы на блокировку рендеринга отмечены красным треугольником в правом верхнем углу.

Наведите просьбу увидеть всплывающую подсказку с:

• URL -адрес запроса и общее время, которое потребовалось для его выполнения.
• Приоритет или изменение приоритета, например, Medium -> High .
• Является ли запрос Render blocking или нет.
• Разбивка времен запроса, описанная позже.

Когда вы нажимаете на запрос, сетевая дорожка привлекает стрелку от своего инициатора для запроса.

Кроме того, панель производительности показывает вам вкладку «Сводка» с дополнительной информацией о запросе, включая, помимо прочего, начальный приоритет и (окончательный) приоритетные поля. Если их значения различаются, приоритет запроса извлечена в действие во время записи. Для получения дополнительной информации см. Оптимизирующую загрузку ресурсов с помощью приоритетного API .

The Summary tab also shows a breakdown of the request's timings.

The request for www.google.com is represented by a line on the left ( |– ), a bar in the middle with a dark portion and a light portion, and a line on the right ( –| ).

You can find another timings breakdown in the Network tab. Right-click the request in the Network track or its URL in the Summary tab and click Reveal in Network panel . DevTools takes you to the Network panel and selects the corresponding request. Open its Timing tab.

Here's how these two breakdowns map to each other:

• The left line ( |– ) is everything up to the Connection start group of events, inclusive. In other words, it's everything before Request Sent .
• The light portion of the bar is Request sent and Waiting for server response .
• The dark portion of the bar is Content download .
• The right line ( –| ) is the time spent waiting for the main thread. The Network > Timing tab doesn't show it.

View memory metrics

Enable the Memory checkbox to view memory metrics from the last recording.

DevTools displays a new Memory chart, above the Summary tab. There's also a new chart below the NET chart, called HEAP . The HEAP chart provides the same information as the JS Heap line in the Memory chart.

This example shows memory metrics above the Summary tab.

The colored lines on the chart map to the colored checkboxes above the chart. Disable a checkbox to hide that category from the chart.

The chart only displays the region of the recording that is selected. In the earlier example, the Memory chart shows only the memory usage for the start of the recording, up to around the 1000ms mark.

View the duration of a portion of a recording

When analyzing a section like Network or Main , sometimes you need a more precise estimate of how long certain events took. Hold Shift, click and hold, and drag left or right to select a portion of the recording. At the bottom of your selection, DevTools shows how long that portion took.

In this example, the 488.53ms timestamp at the bottom of the selected portion indicates how long that portion took.

View a screenshot

See Capture screenshots while recording to learn how to enable screenshots.

Hover over the Timeline overview to view a screenshot of how the page looked during that moment of the recording. The Timeline overview is the section that contains the CPU , FPS , and NET charts.

You can also view screenshots by clicking a frame in the Frames section. DevTools displays a small version of the screenshot in the Summary tab.

This example shows the screenshot for the 195.5ms frame in the Summary tab when you click it in the Frames section.

Click the thumbnail in the Summary tab to zoom in on the screenshot.

This example shows a zoomed-in screenshot after you click its thumbnail in the Summary tab.

View layers information

To view advanced layers information about a frame:

1. Enable advanced paint instrumentation .
2. Select a frame in the Frames section. DevTools displays information about its layers in the new Layers tab, next to the Event log tab.

Hover over a layer to highlight it in the diagram.

This example shows the layer #39 highlighted as you hover over it.

To move the diagram:

• Click Pan Mode to move along the X and Y axes.
• Click Rotate Mode to rotate along the Z axis.
• Click Reset Transform to reset the diagram to its original position.

See layer analysis in action:

View paint profiler

To view advanced information about a paint event:

1. Enable advanced paint instrumentation .
2. Select a Paint event in the Main track.

Analyze rendering performance with the Rendering tab

Use the Rendering tab's features to help visualize your page's rendering performance.

Open the Rendering tab .

View frames per second in real time with the FPS meter

The Frame rendering stats is an overlay that appears in the top-right corner of your viewport. It provides a real time estimate of FPS as the page runs.

See Frame rendering stats .

View painting events in real time with Paint Flashing

Use Paint Flashing to get a real time view of all paint events on the page.

See Paint flashing .

View an overlay of layers with Layer Borders

Use Layer Borders to view an overlay of layer borders and tiles on top of the page.

See Layer borders .

Find scroll performance issues in real time

Use Scrolling Performance Issues to identify elements of the page that have event listeners related to scrolling that may harm the performance of the page. DevTools outlines the potentially-problematic elements in teal.

See Scrolling performance issues .