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

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

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

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

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

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

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

Чтобы открыть средство "Производительность " в средствах разработчика:

1. Щелкните правой кнопкой мыши веб-страницу и выберите "Проверить".

   Или нажмите клавиши CTRL+SHIFT+I (Windows, Linux) или COMMAND+OPTION+I (macOS).

   Откроются средства разработчика.

2. В средствах разработчика на панели действий выберите вкладку "Производительность " ().

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

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

В разделах ниже описано, как записывать производительность веб-страницы в средствах разработчика.

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

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

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

2. Щелкните веб-страницу правой кнопкой мыши и выберите "Проверить".

   Откроются средства разработчика.

3. На панели действий выберите средство "Производительность " (").

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

   

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

6. Нажмите кнопку "Запись" еще раз. Вы также можете нажать кнопку "Стоп ", чтобы остановить запись.

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

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

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

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

2. Щелкните веб-страницу правой кнопкой мыши и выберите "Проверить".

   Откроются средства разработчика.

3. На панели действий выберите средство "Производительность " (").

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

   

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

   

Запись снимков экрана во время записи

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

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

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

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

Отображение параметров записи

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

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

  В верхней части средства " Производительность " отображаются флажки и раскрывающиеся списки:

  

Отключение примеров JavaScript

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

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

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

3. Запишите страницу.

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

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

Пример записи при включенных JS-примерах:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Для просмотра подробных инструментов окраски:

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

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

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

Комментирование записи и предоставление к ней общего доступа

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

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

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

Существует несколько способов добавления аннотации.

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

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

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

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

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

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

Вкладка «Заметки» показывает количество заметок рядом с названием вкладки; В этом примере — 5.

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

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

Сохранение записи и предоставление общего доступа к ней

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

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

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

Загрузка записи

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

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

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

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

Очистка предыдущей записи

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

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

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

Получайте полезные сведения

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

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

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

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

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

1. Сделайте запись выступления, согласно приведенному выше разделу "Запись исполнения".

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

   

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

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

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

Сочетания клавиш для навигации

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

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

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

Если выбрана кнопка современного варианта:

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

Если выбрана кнопка "Классический ":

• Увеличение или уменьшение масштаба: колесико мыши или сенсорная панель вверх или вниз.
• Для вертикальной прокрутки: SHIFT + колесо мыши.
• Для горизонтальной прокрутки: SHIFT СТРЕЛКА + |ВЛЕВОСТРЕЛКА ВПРАВО

Дополнительные сочетания клавиш:

• Измените масштаб, нажав клавишу W или S.

• Сдвиньте влево и вправо, нажав клавишу A или D.

Выбор фрагмента записи

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

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

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

1. Поместите фокус на главную дорожку или любой из ее соседей.

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

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

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

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

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

Мышь:

Чтобы выбрать фрагмент записи с помощью мыши:

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

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

Клавиатура:

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

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

2. Нажмите W или S увеличьте или уменьшите масштаб. Нажмите A или D переместите влево или вправо.

Сенсорная панель:

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

1. Наведите курсор на раздел "Обзор " или " Сведения ". Раздел "Обзор" представляет собой область, содержащую диаграммы FPS,CPU и NET. Раздел "Сведения" — это область, содержащая раздел "Основной" и раздел "Взаимодействия".

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

Изменение масштаба фрагментов записи и переключение между уровнями масштабирования

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

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

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

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

   

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

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

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

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

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

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

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

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

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

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

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

   

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

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

   

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• Аннулирование стиля или макета —>пересчет стилей или макета
• Запрос кадра анимации ->Запуск кадра анимации
• Запросить обратный вызов при простое использовании —>обратный вызов Fire Idle
• Установить таймер ->таймер сработал
• create WebSocket ->send... и получить рукопожатие WebSocket или уничтожить WebSocket
• Schedule postTask ->Fire postTask or Abort postTask

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Корневые действия

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

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

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

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

Вкладка дерева звонков

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Просмотр сдвигов макета

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

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

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

Дополнительные сведения см. в статье Накопительный сдвиг макета (CLS) на сайте MDN.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• Холостой рама (белый). Без изменений.

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

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

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

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

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

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

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

Запросы в разделе « Сеть » обозначаются цветом следующим образом:

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

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

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

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

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

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

• Светлая часть полосы предназначена Request Sent для отклика Waiting (TTFB) сервера.

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

• Правая строка — это, по сути, время, потраченное на ожидание основной темы. Это не представлено на вкладке "Время ".

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

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

Средства разработчика отображают диаграмму памяти над вкладкой "Сводка ". Под диаграммой NET также имеется диаграмма с названием "КУЧА". Диаграмма кучи предоставляет те же сведения, что и линия кучи JS на диаграмме памяти :

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

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

См. также:

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

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

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

Просмотр снимка экрана

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

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

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

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

Просмотр сведений о слоях

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

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

2. В разделе "Фреймы " выберите фрейм. Средства разработчика отображают информацию о слоях на вкладке Слои в нижней части инструмента "Производительность ":

   

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

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

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

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

2. Выберите событие Paint в разделе "Основные ". Средства разработчика отображают сведения о событии paint на вкладке Paint Profiler :

   

Просмотр статистики селектора CSS

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

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

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

  

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

См. также:

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

Просмотр сообщений между окнами, iframe и выделенными рабочими процессами

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

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

• postMessage события отправки отображаются как Schedule postMessage.
• postMessage события обработчика отображаются в сообщении On:

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

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

См. также:

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

Просмотр сообщений WebSocket

Действия WebSocket отображаются в сетевой дорожке в средстве "Производительность ", чтобы помочь сопоставить действия JavaScript с сообщениями WebSocket. Это поможет определить, возникают ли проблемы задержки с анализом сообщения клиентом или с откликом сервера.

Просмотр сообщений WebSocket в средстве "Производительность ":

1. Перейдите на веб-страницу, которая отправляет сообщения WebSocket, например приложение "Простой чат", в новом окне или вкладке.

2. Щелкните веб-страницу правой кнопкой мыши и выберите "Проверить".

   Откроются средства разработчика.

3. На панели действий выберите средство "Производительность" (").

4. В левом верхнем углу окна "Производительность " нажмите кнопку "Запись (").

5. На веб-странице чата в текстовом поле Имя пользователя введите имя, например "Иван", и нажмите кнопку "Подключиться ".

   В нижней части формы чата отображается сообщение, например "John:v8g... подключен».

6. В текстовом поле "Отправить сообщение " введите сообщение, например "Привет", и нажмите кнопку "Отправить ".

   В приложении чата отображается сообщение, например "Hello":

   

   Создается трафик WebSocket.

7. В левом верхнем углу окна "Производительность " нажмите кнопку "Стоп " (").

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

   В средстве "Производительность" отображается временная шкала.

8. Разверните сетевую ленту.

9. Щелкните вертикальную золотую линию.

10. В нижней части средства "Производительность ", на вкладке "Сводка ", отображаются сведения о выбранном сообщении WebSocket, такие как:

    • Отправить рукопожатие WebSocket
    • Получение рукопожатия WebSocket
    • Получение сообщения WebSocket:

    

См. также:

• Анализ сообщений о подключении WebSocket в справочнике по сетевым функциям.
• Отслеживайте инициаторов событий выше.
• Анализ производительности среды выполнения (учебное руководство)

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

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

Чтобы открыть инструмент отрисовки :

1. Откройте веб-страницу, например " Медленная анимация", в новом окне или вкладке.

2. Щелкните веб-страницу правой кнопкой мыши и выберите "Проверить".

   Откроются средства разработчика.

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

   Или нажмите клавишу ESC.

4. На панели быстрого просмотра нажмите кнопку "Дополнительные инструменты " ("), а затем выберите "Отрисовка".

   Средство отрисовки откроется на панели быстрого просмотра:

   

См. также:

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

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

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

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

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

   

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

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

Включение мерцания краски:

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

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

   

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

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

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

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

   

Смотрите комментарии в debug_colors.cc для объяснения цветовой кодировки.

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

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

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

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

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

   

См. также:

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

Отключение локальных шрифтов

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

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

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

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

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

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

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

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

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

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

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 строка из 1 000 000 x символов. После выполнения предыдущего кода в средстве "Производительность " создается запись:

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

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

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

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

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

См. также:

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

Примечание.

Некоторые части этой страницы представляют собой измененные материалы, созданные и предоставленные Google , и используемые в соответствии с условиями, описанными в лицензии Creative Commons Attribution 4.0 International License. Оригинальная страница находится здесь , автором которой является Кейси Баскес.

Эта работа предоставляется по лицензии Creative Commons Attribution 4.0 International License.