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

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
• Дерево сетевых зависимостей
• Современный HTTP-протокол
• Используйте эффективные сроки службы кэша
• Шрифт дисплея

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

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

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 также предоставляет три табличных представления для анализа действий. Каждое представление дает вам другую перспективу действий:

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

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

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

• 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 представлен линией слева ( |– ), полосой посередине с темной и светлой частью и линией справа ( –| ).

Если присутствует, вкладка Summary также показывает разбивку времени сервера для сетевых запросов, которые реализуют технологии рендеринга на стороне сервера. Для этих запросов панель Performance берет данные из заголовка ответа Server-Timing .

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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