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

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

Подробнее о том, как анализировать производительность во время выполнения страницы с помощью инструментов разработчика Chrome…

Экран текущих показателей

При первом открытии панели Производительность вы увидите экран "Текущие показатели", на котором представлена сводка производительности текущей страницы по трем Core Web Vitals.

Показатели обновляются по мере того, как вы взаимодействуете со страницей и переходите на новые страницы, включая программные переходы на клиентской стороне в одностраничных приложениях, которые обозначаются значком SOFT NAV. Это хороший способ выявить проблемы производительности, особенно для INP и CLS, если они появляются только при определенных обстоятельствах. Если проблема производительности повторяется постоянно, вы можете записать трассировку, чтобы получить больше информации для отладки основной проблемы.

Функции экрана текущих показателей

Помимо показателей, на экране Текущие показатели есть следующие функции:

• Наблюдаемые показатели из CrUX, если они включены на панели Наблюдаемые показатели.
• Сводка всех значительных различий между локальными и реальными показателями.
• Элемент LCP. Наведите на него указатель мыши, чтобы выделить его на странице.
• Сведения о кластере CLS и типе INP
• Дополнительная информация при наведении указателя на показатели (например, подкомпоненты LCP и INP, а также гистограммы наблюдаемых показателей)
• Панели Взаимодействия и Смещения макета, на которых регистрируются взаимодействия и смещения макета.
• Панель Показатели на основе полевых данных, на которой можно включить данные CrUX, посмотреть сведения о периоде времени, за который они собраны, а также переключиться между данными об источнике и URL (если доступно) и между данными о компьютерах и мобильных устройствах.
• Панель Настройки среды с рекомендациями о том, какое устройство, ЦП и ограничение пропускной способности сети использовать, на основе данных CrUX.

Подробную информацию вы найдете в записи блога Как отслеживать локальные и реальные показатели Core Web Vitals в Инструментах разработчика.

Запись выступления

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

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

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

1. Перейдите на страницу, которую хотите проанализировать.
2. Нажмите на вкладку Эффективность в Инструментах разработчика.
3. Нажмите Запись .
4. Взаимодействуйте со страницей. DevTools записывает все действия на странице, которые происходят в результате ваших взаимодействий.
5. Нажмите Запись ещё раз или выберите Остановить.

Как записать данные о скорости загрузки

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

1. Перейдите на страницу, которую хотите проанализировать.
2. Откройте панель Производительность в Инструментах разработчика.
3. Нажмите Записать и перезагрузить . Сначала DevTools переходит на страницу about:blank, чтобы удалить все оставшиеся скриншоты и трассировки. Затем инструменты разработчика записывают показатели эффективности во время перезагрузки страницы, а затем автоматически останавливают запись через пару секунд после завершения загрузки.

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

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

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

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

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

Подробнее о том, как посмотреть скриншот…

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

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

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

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

Примеры отключения JavaScript

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

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

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

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

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

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

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

1. Откройте меню Настройки записи . Подробнее о том, как посмотреть настройки записи…
2. В разделе Сеть выберите нужный уровень регулирования.

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

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

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

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

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

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

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

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

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

Подробнее о том, как анализировать производительность селекторов CSS во время событий Recalculate Style…

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

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

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

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

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

Включает пользовательские дорожки и сводки групп пользовательских дорожек в сводке трассировки, которые можно настроить с помощью DevTools Extensibility API.

Удалить предыдущую запись

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

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

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

Как добавить аннотации к записи и поделиться ею

Подробнее о том, как добавлять заметки и делиться результатами анализа эффективности…

Получайте полезную статистику

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

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

Чтобы использовать статистику:

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

Как перемещаться по записи

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

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

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

Как использовать быстрые клавиши для навигации

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

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

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

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

Как выбрать фрагмент записи

Под панелью действий на панели Эффективность и в верхней части записи находится раздел Обзор временной шкалы с диаграммами ЦП и СЕТЬ.

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

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

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

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

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

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

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

Чтобы создать и использовать цепочки навигации:

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

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

Как прокрутить длинный флейм-граф

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

Как игнорировать нерелевантные скрипты на флейм-графе

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

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

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

Панель автоматически свернет лишние вложенные элементы в таких скриптах и пометит их как On ignore list (REGULAR_EXPRESSION).

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

Чтобы убрать скрипт из списка игнорирования, нажмите на него правой кнопкой мыши на флейм-графе и выберите Удалить скрипт из списка игнорирования или наведите на него указатель мыши в диалоговом окне compress Показать настройки списка игнорирования и нажмите delete Удалить.

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

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

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

Вы можете выполнять поиск по действиям на дорожке Main (Основная) и запросам на дорожке Network (Сеть).

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

• macOS: Command + F.
• Windows, Linux: Ctrl + F.

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

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

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

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

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

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

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

Как изменить порядок дорожек и скрыть их

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

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

1. Чтобы перейти в режим настройки, нажмите правой кнопкой мыши на название дорожки и выберите Настроить дорожки.
2. Нажмите на стрелку вверх arrow_upward или вниз arrow_downward, чтобы переместить дорожку. Чтобы скрыть его, нажмите visibility_off.
3. Когда все будет готово, нажмите Завершить настройку дорожек внизу, чтобы выйти из режима настройки.

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

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

Как посмотреть действия в основном потоке

На дорожке Main (Основная) можно посмотреть действия, которые выполнялись в основном потоке страницы.

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

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

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

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

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

Чтобы сосредоточиться на эффективности собственного кода:

1. Убедитесь, что в трассировке производительности или на вкладке Статистика ничего не выбрано. Для этого нажмите на пустое место в трассировке.
2. Установите флажок check_box Затемнить сторонние источники на панели действий вверху. На панели Производительность события, связанные со сторонними ресурсами, будут выделены серым цветом, а события, связанные с собственными ресурсами, – ярким.

Как выделить события с помощью таблицы "Собственная или сторонняя таблица"

Если вы выбрали диапазон на обзорной временной шкале и не выбрали ни одного события, на вкладке Сводка появится таблица Собственные / сторонние, в которой перечислены размеры передаваемых данных и время основного потока для следующих элементов:

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

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

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

Как читать флейм-граф

На панели Производительность действия основного потока представлены в виде флейм-графа. Ось X представляет запись во времени. По оси Y показан стек вызовов. События, расположенные выше, вызывают события, расположенные ниже.

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

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

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

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

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

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

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

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

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

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

На вкладке Summary (Сводка) для инициаторов показываются ссылки Initiator for (Инициатор для), а для событий, которые они вызвали, – ссылки Initiated by (Инициировано). Нажмите на них, чтобы перейти к соответствующим событиям.

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

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

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

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

   

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

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

   

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

Как игнорировать скрипты на флейм-графе

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

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

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

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

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

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

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

• match_case Учитывать регистр.
• regular_expression Регулярное выражение.
• match_word – учитывать слово целиком.

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

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

Действия с правами root

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

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

На флейм-графе дорожки Main корневые действия находятся вверху. На вкладках Дерево вызовов и Журнал событий корневые действия – это элементы верхнего уровня.

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

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

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

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

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

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

Чтобы отсортировать таблицу по столбцу, нажмите Self Time (Собственное время), Total Time (Общее время) или Activity (Действие).

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

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

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

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

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

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

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

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

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

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

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

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

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

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

На вкладке Журнал событий отображаются только действия, выполненные в выбранной части записи. Подробнее о том, как выбрать фрагмент записи…

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

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

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

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

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

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

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

Посмотреть маркеры эффективности

На оверлее с вертикальными линиями, наложенном на трассировку эффективности, можно увидеть важные маркеры эффективности, такие как:

• Первая отрисовка контента (FCP)
• Отрисовка самого крупного контента (LCP)
• Событие DOMContentLoaded (DCL)
• Событие загрузки (L)

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

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

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

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

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

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

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

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

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

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

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

На дорожке Interactions (Взаимодействия) взаимодействия, которые длятся дольше 200 миллисекунд, помечаются красным треугольником в правом верхнем углу.

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

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

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

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

Подробнее о Cumulative Layout Shift (CLS)…

Как посмотреть анимации

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

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

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

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

Посмотреть действия с растровыми изображениями

Посмотрите действия по растрированию в разделе Пул потоков.

Анализ количества кадров в секунду

В DevTools есть несколько способов проанализировать количество кадров в секунду:

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

Раздел "Фреймы"

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

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

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

В разделе Фреймы могут быть представлены четыре типа фреймов:

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

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

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

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

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

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

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

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

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

Если нажать на запрос, на дорожке Сеть появится стрелка, указывающая от инициатора к запросу.

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

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

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

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

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

Ниже показано, как эти два типа разбивки соотносятся друг с другом.

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

Как посмотреть показатели памяти

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

В DevTools появится новая диаграмма Память над вкладкой Сводка. Под диаграммой NET появилась новая диаграмма HEAP. На диаграмме HEAP представлена та же информация, что и на линии JS Heap диаграммы Memory.

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

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

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

Как посмотреть продолжительность фрагмента записи

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

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

Как посмотреть скриншот

Подробнее о том, как включить скриншоты…

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

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

На этом примере показан скриншот фрейма 195.5ms на вкладке Сводка, когда вы нажимаете на него в разделе Фреймы.

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

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

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

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

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

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

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

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

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

Посмотрите, как работает анализ слоев:

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

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

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

Как анализировать производительность отрисовки на вкладке Rendering

Функции на вкладке Отрисовка позволяют визуализировать производительность отрисовки страницы.

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

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

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

Подробнее о статистике отрисовки кадров…

Как просматривать события отрисовки в реальном времени с помощью функции Paint Flashing

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

Подробнее о мигании краски…

Как посмотреть наложение слоев с помощью инструмента "Границы слоев"

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

Подробнее о границах слоев…

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

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

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