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

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

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

На изображениях на этой странице отображаются средства разработки, отстыкованные в отдельном выделенном окне. Дополнительные сведения о отстыковке средств разработки см. в разделе Открепить средства разработки в отдельное окностатьи Изменение размещения средств разработки (открепить, закрепить вниз, закрепить налево).

Подробное содержимое:

• Откройте средство "Производительность"
• Производительность записи
  • Запись производительности среды выполнения
  • Производительность загрузки записей
  • Создание снимков экрана во время записи
  • Принудительный сбор мусора во время записи
  • Отображение параметров записи
  • Отключение примеров JavaScript
  • Регулирование сети во время записи
  • Регулирование ЦП во время записи
  • Включение статистики селектора CSS
  • Включение расширенного инструментирования краски
• Добавление заметок к записи и предоставление общего доступа к ней
  • Сохранение записи и предоставление общего доступа к ней
  • Загрузка записи
• Очистка предыдущей записи
• Анализ записи производительности
  • Получение аналитических сведений с действиями
  • Навигация по записи
    • Использование сочетаний клавиш для навигации
    • Выбор части записи
    • Увеличение части записи и переключение между уровнями масштабирования
    • Прокрутка длинной диаграммы пламени
  • Действия поиска
  • Изменение порядка дорожек и их скрытие
  • Просмотр действия потока main
  • Чтение диаграммы пламени
  • Отслеживание инициаторов событий
  • Скрытие функций и их дочерних элементов в диаграмме пламени
    • Игнорировать скрипты в диаграмме пламени
  • Просмотр действий в таблице
    • Действия корневого каталога
    • Вкладка "Снизу вверх"
    • Вкладка "Дерево вызовов"
    • Вкладка "Журнал событий"
  • Просмотр маркеров производительности
  • Просмотр пользовательских таймингов
  • Просмотр взаимодействий
  • Просмотр изменений макета
  • Просмотр анимаций
  • Просмотр действий GPU
  • Просмотр действия растра
  • Анализ кадров в секунду (FPS)
    • Раздел "Кадры"
  • Просмотр сетевых запросов
  • Просмотр метрик памяти
  • Просмотр длительности части записи
  • Просмотр снимка экрана
  • Просмотр сведений о слоях
  • Просмотр профилировщика краски
  • Просмотр статистики селектора CSS
  • Просмотр сообщений между окнами, iframes и выделенными рабочими ролей
• Анализ производительности отрисовки с помощью средства отрисовки
  • Просмотр кадров в секунду в режиме реального времени с помощью счетчика FPS
  • Просмотр событий рисования в режиме реального времени с помощью Paint Flashing
  • Просмотр наложения слоев с помощью границ слоев
  • Поиск проблем с производительностью прокрутки в режиме реального времени
  • Отключение локальных шрифтов
• Визуализация утечек памяти (средство производительности: флажок "Память")

Чтобы использовать разделы этой страницы, откройте средство "Производительность " в средствах разработки:

1. Чтобы открыть Средства разработки, щелкните веб-страницу правой кнопкой мыши и выберите пункт Проверить. Или нажмите клавиши CTRL+SHIFT+I (Windows, Linux) или COMMAND+OPTION+I (macOS). Откроется devTools.

2. В средствах разработки на панели действий выберите вкладку Производительность . Если эта вкладка не отображается, нажмите кнопку Дополнительные инструменты (") .

В следующих разделах описывается запись производительности веб-страницы в DevTools.

Чтобы проанализировать производительность веб-страницы во время ее выполнения (а не во время загрузки):

1. Перейдите на веб-страницу, которую вы хотите проанализировать, например демонстрацию Фотоальбом.

2. В средствах разработки откройте средство Производительность .

3. Нажмите кнопку Запись ().

   

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

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

   Средство "Производительность " отображает запись.

Чтобы проанализировать производительность веб-страницы во время ее загрузки (а не во время ее выполнения):

1. Перейдите на веб-страницу, которую вы хотите проанализировать, например демонстрацию Фотоальбом.

2. В средствах разработки откройте средство Производительность .

3. Нажмите кнопку Обновить страницу ().

   

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

   

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

Сведения о том, как взаимодействовать со снимками экрана, см. в разделе Просмотр снимка экрана ниже.

Чтобы принудительно выполнить сборку мусора во время записи страницы, нажмите кнопку Сбор мусора ():

Чтобы предоставить дополнительные параметры, связанные с тем, как DevTools записывает записи производительности, в средстве производительности нажмите кнопку Параметры захвата (). Флажки и раскрывающийся список отображаются в верхней части средства производительности :

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

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

2. Установите флажок Отключить примеры JavaScript .

3. Сделайте запись страницы.

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

Пример записи при отключении примеров JS:

Пример записи, когда включены примеры JS:

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

1. В средстве Производительность нажмите кнопку Параметры записи (). См . раздел Показать параметры записи выше.

2. Задайте для сети нужный уровень регулирования.

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

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

1. В средстве Производительность нажмите кнопку Параметры записи (). См . раздел Показать параметры записи выше.

2. Задайте для ЦП нужный уровень регулирования.

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

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

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

1. Нажмите кнопку Параметры записи (). См . раздел Показать параметры записи выше.

2. Установите флажок Включить статистику селектора CSS .

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

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

1. Нажмите кнопку Параметры записи (). См . раздел Показать параметры записи выше.

2. Установите флажок Включить расширенное инструментирование краски (медленное).

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

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

Чтобы примечать запись, откройте вкладку Заметки на боковой панели средства производительности . Если боковая панель не отображается, нажмите кнопку Показать боковую панель ().

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

Добавить заметку можно несколькими способами:

• Пометить элемент. Чтобы пометить элемент в трассировке производительности, дважды щелкните элемент, введите метку в текстовое поле и нажмите клавишу ВВОД.

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

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

Например, откройте веб-страницу Демонстрация вкладок действий в новом окне или вкладке, создайте запись производительности, а затем выполните указанные выше три действия. Результат:

В этом примере приведены следующие сведения:

• Три заметки.
• Заметка со стрелкой, соединяющая две заметки.
• Диапазон времени с заметками, выделенный розовым цветом.

На вкладке Заметки отображается количество заметок рядом с именем своей вкладки; в этом примере — 5.

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

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

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

Кроме того, выберите Сохранить трассировку без заметок.

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

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

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

Или щелкните правой кнопкой мыши в средстве Производительность , а затем выберите Загрузить профиль:

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

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

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

Средство производительности извлекает полезные сведения из записанных данных о производительности. Эти аналитические сведения позволяют повысить производительность веб-сайта. К аналитическим сведениям относятся:

• INP по этапам
• LCP по этапам
• Обнаружение запросов LCP
• Виновников смены макета
• Отрисовка блокирующего запроса
• Дерево сетевых зависимостей
• Улучшение доставки изображений
• Задержка запроса документа
• Отображение шрифта
• Оптимизация окна просмотра для мобильных устройств
• Оптимизация размера DOM
• 3-е партии
• Затраты на селектор CSS
• Принудительная перезагрузка
• Использование эффективного времени существования кэша

Аналитические сведения предназначены для улучшения метрик Core Web Vitals и оптимизации быстрой загрузки и отрисовки веб-страницы.

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

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

1. Создайте запись производительности для каждой записи выше.

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

   

   Если боковая панель и вкладка Аналитика не отображаются, нажмите кнопку Показать боковую панель ().

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

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

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

После нажатия кнопки Современный :

• Чтобы увеличить масштаб: Command/CTRL + колесико мыши.
• Вертикальная прокрутка: колесико мыши.
• Для горизонтальной прокрутки: SHIFT +колесико мыши.

После нажатия кнопки Классический :

• Масштабирование: колесико мыши или сенсорная панель вверх или вниз.
• Чтобы выполнить вертикальную прокрутку: SHIFT +колесико мыши.
• Горизонтальная прокрутка:стрелка|влево вправо +

Вы также можете сдвигать влево и вправо, нажимая клавиши A и D , а также масштабировать, нажав клавиши W или S .

См. также:

• Панель производительности: включение переключения на альтернативный вариант временная шкала навигации в экспериментальных функциях в Средствах разработки Microsoft Edge.

В верхней части записи отображается раздел Обзор временной шкалы , включая диаграммы ЦП и NET (указаны справа):

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

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

1. Сосредоточьтесь на главной дорожке или на любом из его соседей.

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

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

1. Наведите указатель мыши на раздел Обзор временной шкалы или любую из дорожек (Main и его соседей).

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

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

Мышь:

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

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

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

Клавиатура:

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

1. Выберите фон раздела Main или фон раздела, который находится рядом с основным разделом, например Взаимодействия, Сеть или GPU. Этот рабочий процесс клавиатуры работает только в том случае, если в фокусе находится один из этих разделов.

2. Нажмите W или S , чтобы уменьшить или уменьшить масштаб. Нажмите или AD выберите для перемещения влево или вправо.

Трекпад:

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

1. Наведите указатель мыши на раздел Обзор или Сведения . Раздел Обзор — это область, содержащая диаграммы FPS, ЦП и NET . Раздел Сведения — это область, содержащая раздел Main и Interactions .

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

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

Чтобы увеличить часть записи и использовать навигационные сухари:

1. В разделе Обзор временной шкалывыберите часть записи (выше).

2. Наведите указатель мыши на выделенный фрагмент и нажмите кнопку N мс ():

   

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

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

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

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

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

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

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

1. Нажмите клавиши CTRL+F (Windows, Linux) или COMMAND+F (macOS).

   В нижней части средства Производительность появится поле Найти:

   

2. В поле Найти введите запрос, например "recalculate style".

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

   

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

• Чтобы выбрать следующее действие, нажмите клавишу ВВОД или нажмите кнопку Далее ().

• Чтобы выбрать предыдущее действие, нажмите клавиши SHIFT+ВВОД или нажмите кнопку Предыдущий ().

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

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

• Чтобы использовать регулярное выражение в запросе, нажмите кнопку Включить регулярные выражения ( Если нажать кнопку Регулярное выражение , а затем ввести ^E.* , он находит любое действие, которое начинается с буквы E.

• Чтобы сделать запрос чувствительным к регистру, нажмите кнопку Включить поиск с учетом регистра (

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

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

Перемещение и скрытие дорожек:

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

2. Нажмите кнопку Переместить дорожку вверх () или Кнопку Переместить дорожку вниз (), чтобы переместить дорожку вверх или вниз. Нажмите кнопку Скрыть дорожку (), чтобы скрыть ее.

3. Щелкните правой кнопкой мыши дорожку и выберите Завершить настройку.

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

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

Выберите событие, чтобы просмотреть дополнительные сведения о нем на вкладке Сводка . DevTools описывает выбранное событие:

DevTools представляет main действие потока с помощью диаграммы пламени:

Ось X представляет запись с течением времени. Ось Y представляет стек вызовов. Событие, которое находится рядом с верхней, вызывает события, которые находятся под ним; Например, на предыдущем рисунке событие вызвало Function Call, который запустил анонимную функцию, которая вызвала filterByCamera , а затем populateGallery.input Затем populateGallery функция внесла изменения в DOM, вызвав .set innerHTML

DevTools назначает скриптам случайные цвета. На предыдущем рисунке запросы функций из скрипта окрашены фуксией (фиолетовый-розовый). Более темный желтый цвет представляет действие скрипта, а событие purple — действие отрисовки. Эти темные желтые и фиолетовые события согласованы во всех записях.

Если вы хотите скрыть подробную диаграмму пламени запросов JavaScript, см . раздел Отключение примеров JavaScript выше. Если примеры JavaScript отключены, отображаются только события высокого уровня, например Event: input и Function Call из предыдущего рисунка.

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

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

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

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

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

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

• Недопустимое изменение стиля или макета —>перерасчет стилей или макета
• Кадр анимации запроса —>сработал кадр анимации
• Обратный вызов в режиме простоя запроса —>обратный вызов в режиме простоя
• Установка таймера —>таймер сработал
• Создание WebSocket ->Send... и получение Подтверждения WebSocket или Уничтожение WebSocket
• Расписание postTask ->Fire postTask или Abort postTask

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• Кнопка Включить регулярные выражения (

• Кнопка Включить поиск с учетом регистра (

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

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

Следующие три раздела относятся к одной и той же демонстрации. Вы можете запустить демонстрацию самостоятельно на вкладках действий Demo и просмотреть источник по адресу MicrosoftEdge / Demos > /devtools-performance-activitytabs/.

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

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

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

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

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

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

На предыдущем рисунке элементы верхнего уровня в столбце Действие , такие как Event Timing, являются корневыми действиями. Вложенный объект представляет стек вызовов. Например, на предыдущем рисунке Event Timing вызывается Event: mouseup, который вызывает , который вызывает Function Call, который вызывает (anonymous), и т. д.

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

Щелкните Самостоятельное время, Общее время или Действие , чтобы отсортировать таблицу по столбцу.

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

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

Щелкните Показать самый тяжелый стек (), чтобы отобразить другую таблицу справа от таблицы Действия . Щелкните действие, чтобы заполнить таблицу Тяжелый стек . В таблице Тяжелый стек отображается, какие дочерние элементы выбранного действия заняли самое длительное время.

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

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

На диаграмме пламени основного раздела предыдущего рисунка почти все время было затрачено на aвыполнение функций , bи c . Верхние действия на вкладке "Снизу вверх " предыдущего рисунка также a: , bи c. На вкладке Снизу вверх следующим самым дорогостоящим действием является Minor GC.

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

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

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

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

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

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

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

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

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

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

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

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

• First Paint (FP)
• First Contentful Paint (FCP)
• Наибольшее содержимое paint (LCP)
• Событие DOMContentLoaded (DCL)
• Событие onload (L)

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

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

• performance.mark() Звонки.

• performance.measure() Звонки.

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

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

Красная линия в нижней части взаимодействия представляет время, затраченное на ожидание main потока.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• Неактивный кадр (белый). Нет изменений.

• Рамка (зеленый). Отрисовывается должным образом и вовремя.

• Частично представленная рамка (желтый с разреженным широким тире). Microsoft Edge сделал все возможное, чтобы вовремя отобразить по крайней мере некоторые визуальные обновления. Например, если работа потока main процесса отрисовщика (анимация на холсте) запаздывает, а поток композитора (прокрутка) находится во времени.

• Выброшенная рамка (красный цвет с плотной сплошной линией). Microsoft Edge не может визуализировать кадр в разумное время.

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

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

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

Запросы в разделе "Сеть " имеют цветовую кодировку следующим образом:

• Синий фон: HTML-запрос.
• Фиолетовый фон: запрос CSS.
• Темно-желтый фон: запрос JS.
• Зеленый фон: запрос изображения.

Запросы имеют квадраты в левом верхнем углу:

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

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

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

• Левая линия — это все, вплоть до Connection Start группы событий, включительно. Другими словами, это все до Request Sent, эксклюзив.

• Светлая часть панели — и Request SentWaiting (TTFB) для ответа сервера.

• Темная часть панели — Content Download.

• По сути, правильная линия — это время, затраченное на ожидание main потока. Он не представлен на вкладке "Время ".

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

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

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

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

См. также:

• Визуализация утечек памяти (средство производительности: флажок память) ниже.

При анализе раздела , например "Сеть" или "Основной", иногда требуется более точная оценка продолжительности определенных событий. Удерживая нажатой клавишу SHIFT, щелкните и удерживайте ее и перетащите влево или вправо, чтобы выбрать часть записи. В нижней части выбранного фрагмента devTools показано, сколько времени заняла эта часть:

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

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

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

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

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

1. В средстве Производительность нажмите кнопку Параметры захвата (параметры захвата) и установите флажок Включить расширенное инструментирование отрисовки (медленно).

2. В разделе Кадры выберите кадр. DevTools отображает сведения о слоях на вкладке Слои в нижней части средства производительности :

   

Вкладка Слои работает как вкладка Составные слои в инструменте трехмерного представления . Сведения о том, как взаимодействовать с вкладкой "Слои ", см. в статье Навигация по слоям веб-страницы, z-индексу и модели DOM с помощью средства трехмерного представления.

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

1. В средстве Производительность нажмите кнопку Параметры захвата (параметры захвата) и установите флажок Включить расширенное инструментирование отрисовки (медленно).

2. Выберите событие Paint в разделе Main . DevTools отображает сведения о событии paint на вкладке Paint Profiler :

   

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

• В средстве Производительность нажмите кнопку Параметры захвата (параметры захвата) и установите флажок Включить расширенное инструментирование отрисовки (медленно).

  DevTools отображает агрегированные сведения о селекторах правил CSS, которые были пересчитаны во время записи на вкладке Статистика выбора :

  

1. В разделе Main (Основной ) выберите событие Recalculate Style (Перерасчет стиля ). На вкладке Статистика выбора средства разработки отображают сведения о селекторах правил CSS, которые были пересчитаны во время этого события.

См. также:

• Анализ производительности селектора CSS во время событий recalculate Style

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

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

• postMessage События dispatch отображаются как Расписание postMessage.
• postMessage События обработчика отображаются как On Message:

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

Чтобы использовать эту функцию, в Средствах разработки выберите Настройка и управление Средствами разработки () >Параметры Эксперименты>, установите флажок Панель Производительность: показать потоки отправки и обработки postMessage, нажмите кнопку Закрыть (X) и нажмите кнопку Перезагрузить средства разработки.

См. также:

• Справочник по событиям записи производительности
• Демонстрация событий трассировки postMessage (отрисовка)
• Демонстрация событий трассировки postMessage (исходный код)

Используйте средство отрисовки , чтобы визуализировать производительность отрисовки страницы. Средство отрисовки — это средство быстрого просмотра . Если открыть его из меню "Команда", он откроется в нижней части devTools.

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

1. Щелкните правой кнопкой мыши веб-страницу и выберите Пункт Проверить. Или нажмите клавиши CTRL+SHIFT+I (Windows, Linux) или COMMAND+OPTION+I (macOS). Откроется devTools.

2. На панели действий (или в режиме быстрого просмотра) нажмите кнопку Дополнительные инструменты (") и выберите отрисовка.

   Откроется средство отрисовки :

   

См. также:

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

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

1. Откройте средство отрисовки . См. раздел Анализ производительности отрисовки с помощью средства отрисовки выше.

2. Установите флажок Статистика отрисовки кадров . На отображаемой веб-странице отображается наложение счетчика FPS :

   

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

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

1. Откройте средство отрисовки . См. раздел Анализ производительности отрисовки с помощью средства отрисовки выше.

2. Установите флажок Paint Flashing (Мигание краски ). На отображаемой веб-странице отображаются зеленые контуры:

   

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

1. Откройте средство отрисовки , как описано выше в разделе Анализ производительности отрисовки с помощью средства отрисовки.

2. Установите флажок Границы слоев . Границы слоя отображаются на отрисоченной веб-странице:

   

Описание цветовых кодов см. в комментариях в debug_colors.cc .

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

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

1. Откройте средство отрисовки , как описано выше в разделе Анализ производительности отрисовки с помощью средства отрисовки.

2. Установите флажок Проблемы с производительностью прокрутки . Описываются потенциально проблемные элементы:

   

См. также:

• Медленная прокрутка прямоугольника (флажок) в навигации по уровням веб-страницы, z-индексу и модели DOM с помощью инструмента трехмерного представления.

В средстве отрисовки установите флажок Отключить локальные шрифты , чтобы эмулировать отсутствующие local() источники в @font-face правилах.

Например, если на вашем устройстве установлен шрифт Rubik , а @font-face src правило использует его в качестве шрифта local() , Microsoft Edge использует локальный файл шрифта с вашего устройства.

Если выбран параметр Отключить локальные шрифты , Средства разработки игнорируют local() шрифты и извлекают каждый шрифт из сети:

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

• Локальный шрифт для средств проектирования.
• Веб-шрифт для кода.

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

• Отладка и измерение производительности загрузки и оптимизация веб-шрифтов.
• Проверьте точность правил CSS @font-face .
• Узнайте о различиях между локальными версиями, установленными на устройстве, и веб-шрифтом.

В качестве отправной точки для изучения использования памяти веб-страницы используйте флажок Память средства производительности. (Или мониторинг использования памяти в режиме реального времени (диспетчер задач браузера Microsoft Edge).)

Средство "Производительность " помогает визуализировать использование памяти страницы с течением времени.

1. В средствах разработки откройте средство Производительность .

2. Установите флажок Память .

3. Сделайте запись для каждой записи производительности выше.

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

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

var x = [];
function grow() {
    for (var i = 0; i < 10000; i++) {
        document.body.appendChild(document.createElement('div'));
    }
    x.push(new Array(1000000).join('x'));
}
document.getElementById('grow').addEventListener('click', grow);

При каждом нажатии кнопки, на которую ссылается код, к тексту документа добавляется 10 000 div узлов, а в массив помещается x строка из 1000 000 x символов. При выполнении предыдущего кода создается запись в средстве производительности :

Во-первых, объяснение пользовательского интерфейса. Диаграмма HEAP в области Обзор (под NET) представляет кучу JS. Под панелью Обзор находится панель Счетчик . Использование памяти разбивается по куче JS (аналогично диаграмме HEAP в области обзор ), документам, узлам DOM, прослушивателям и памяти GPU. Снимите флажок, чтобы скрыть его от графа.

Теперь анализ кода сравнивается с предыдущим рисунком. Если вы просмотрите счетчик узла (зеленый график), он будет точно совпадать с кодом. Число узлов увеличивается в дискретных шагах. Можно предположить, что каждое увеличение числа узлов является вызовом grow().

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

По мере выполнения записи отображаются пики размера кучи JS. Это естественно и ожидаемо: код JavaScript создает узлы DOM при каждой нажатии кнопки и выполняет большую работу при создании строки из миллиона символов.

Ключевым моментом здесь является тот факт, что куча JS заканчивается выше, чем она началась ("начало" здесь является точкой после принудительной сборки мусора). В реальном мире, если вы видите эту схему увеличения размера кучи JS или размера узла, это может указывать на утечку памяти.

См. также:

• Просмотрите метрики памяти выше.

Эта работа лицензируется по международной лицензии Creative Commons Attribution 4.0.