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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Дополнительные сведения см. в статье «Анализ производительности селектора CSS во время событий пересчета стиля» .

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

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

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

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

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

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

Чтобы добавить аннотацию к записи, откройте вкладку «Аннотации» на боковой панели left_panel_open слева от панели «Производительность» . Добавить аннотацию можно несколькими способами:

• Метка элемента : чтобы добавить метку к элементу, дважды щелкните его и введите метку.
• Соединение двух элементов : чтобы соединить два элемента стрелкой, дважды щелкните первый элемент, щелкните стрелку рядом с ним, затем щелкните второй элемент.
• Пометка временного диапазона . Чтобы пометить произвольный временной диапазон, перетащите, удерживая клавишу «Shift», от начала временного диапазона к его концу, затем введите метку.

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

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

Чтобы скрыть аннотации из трассировки производительности, установите флажок « Скрыть аннотации» внизу вкладки «Аннотации» .

Сохраните и поделитесь записью

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

Альтернативно выберите «Сохранить трассировку без аннотаций» .

Загрузить запись

Чтобы загрузить запись, нажмите «Загрузить» на панели действий в верхней части панели «Производительность» .

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

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

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

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

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

Получите полезную информацию

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Поисковая деятельность

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Прочитайте таблицу пламени

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

   

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

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

   

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

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

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

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

Просмотр активности в таблице

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

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

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

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

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

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

Примечание. Следующие три раздела относятся к одной и той же демонстрации. Вы можете запустить демо-версию самостоятельно на странице «Демо-версия вкладок действий» и просмотреть исходный код по адресу GoogleChrome/devtools-samples/perf/activitytabs.html .

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

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

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

На диаграмме пламени Главного трека коренные действия находятся в верхней части диаграммы. На вкладках «Дерево вызовов» и «Журнал событий» корневые действия являются элементами верхнего уровня.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Столбец «Время на себя» представляет совокупное время, потраченное непосредственно на это действие, во всех его проявлениях.

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

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

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

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

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

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

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

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

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

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

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

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

На дорожке времени просматривайте важные маркеры, такие как:

• Первая краска (FP)
• Первая содержательная краска (FCP)
• Самая большая содержательная краска (LCP)
• Событие DOMContentLoaded (DCL)
• Событие загрузки (L)
• Ваши пользовательские вызовы performance.mark() . Отдельная отметка с подсказкой показана ниже на отметке 813,44 мс и называется «Начало запуска JavaScript» .
• Ваши пользовательские вызовы performance.measure() . Ниже показан желтый диапазон с надписью «Медленное взаимодействие» .

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

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

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

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

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

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

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

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

Посмотреть изменения макета

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

В разделе «Кадры» могут отображаться четыре типа кадров:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Наведите указатель мыши на обзор временной шкалы, чтобы просмотреть снимок экрана, показывающий, как страница выглядела в тот момент записи. Обзор временной шкалы — это раздел, содержащий диаграммы ЦП , FPS и NET .

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

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

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

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

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

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

1. Включите расширенные инструменты рисования .
2. Выберите кадр в разделе «Кадры» . DevTools отображает информацию о своих слоях на новой вкладке «Слои » рядом с вкладкой «Журнал событий» .

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

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

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

• Нажмите «Режим панорамирования». для перемещения по осям X и Y.
• Нажмите «Режим поворота». вращаться вокруг оси Z.
• Нажмите «Сбросить преобразование». чтобы вернуть диаграмму в исходное положение.

Посмотрите анализ слоев в действии:

Посмотреть профилировщик краски

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

1. Включите расширенные инструменты рисования .
2. Выберите событие Paint на главной дорожке.

Анализируйте производительность рендеринга на вкладке «Рендеринг».

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

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

Просматривайте количество кадров в секунду в реальном времени с помощью счетчика FPS.

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

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

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

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

См. раздел «Мигание краски» .

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

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

См. Границы слоев .

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

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

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