Настройка профиля производительности с помощью API расширяемости

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

• Обзор
• Основные преимущества
  • Выбор правильного API
• Внедрение данных с помощью console.timeStamp()
• Внедрение данных с помощью API синхронизации пользователей
  • devtools объект
• Просмотр пользовательских данных в профиле производительности
• Примеры кода
  • console.timeStamp() Примеры API
  • Примеры API синхронизации пользователей
    • Добавление пользовательских дорожек и записей в временная шкала (performance.measure())
    • Добавление маркеров в дорожку "Синхронизация" (performance.mark())
• См. также

Обзор

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

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

API расширения производительности позволяют понять, что происходит в коде.

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

Api расширения производительности — это два подхода к достижению этой цели:

1. console.timeStamp() API (расширенный для средств разработки)

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

2. API синхронизации пользователей (с помощью performance.mark() и performance.measure())

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

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

• Красная рамка в дорожке "Синхронизация ": performance.mark(). Настраиваемые маркеры: Запуск фильтрации, Фильтрация выполнена и Выбрана фотография. Вертикальные пунктирные линии охватывают все дорожки.

• Синяя рамка в пользовательской дорожке создания фотографий : performance.measure()

• Зеленый прямоугольник в пользовательской дорожке дорожки метки времени консоли : console.timeStamp()

Основные преимущества

Оба API предлагают:

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

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

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

Выбор правильного API

API console.timeStamp() и USER Timings обслуживают разные потребности.

Используйте API в следующих случаях console.timeStamp() :

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

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

• Данные должны быть визуализированы только в средстве производительности .

Используйте API синхронизации пользователей (performance.mark() или performance.measure()) в следующих случаях:

• Необходимо хранить дополнительные данные с каждой записью и при использовании API пользовательских временных параметров.

• Необходимо связать расширенные данные (подсказки, подробные свойства) с записями о производительности.

• Вы хотите добавить визуальные маркеры для выделения определенных моментов.

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

• Вы уже знакомы с API синхронизации пользователей или используете его.

В демонстрации Фотоальбом демонстрируются все эти API.

Внедрение данных с помощью console.timeStamp()

console.timeStamp() API расширен, чтобы можно было создавать пользовательские записи времени в средстве производительности с минимальными затратами, особенно если средства разработки не записывали трассировку.

Синтаксис:

console.timeStamp(label: string, 
                  start?: string|number, 
                  end?: string|number, 
                  trackName?: string, 
                  trackGroup?: string, 
                  color?: DevToolsColor);

• label:

  Метка для записи времени.

• start (необязательно):

  • Если определяется как строка: имя ранее записанной метки времени (с помощью console.timeStamp(timeStampName)).

  • Если задано как число: метка времени в миллисекундах относительно Performance.timeOrigin (например, взятая с performance.now()), представляющая время начала записи времени.

  • Если значение не определено, в качестве времени начала используется текущее время.

• end:

  • Если он определен как строка: имя ранее записанной метки времени.

  • Если задано как число: метка времени в миллисекундах относительно Performance.timeOrigin (например, взятая с performance.now()), представляющая время окончания записи времени.

  • Если значение не определено, текущее время используется в качестве времени окончания.

• trackName:

  Имя настраиваемой дорожки.

• trackGroup:

  Имя группы треков.

• color:

  Цвет записи.

См. также:

• Спецификация расширения console.timeStamp — 6-параметрная версия метода.
  • console: статический метод timeStamp() — версия метода с 1 параметром.

Внедрение данных с помощью API синхронизации пользователей

Чтобы внедрить пользовательские данные, добавьте devtools объект в свойство performance.mark()detail метода или в свойство performance.measure()detail метода. Структура этого devtools объекта определяет, как данные отображаются в средстве производительности .

• Используйте performance.mark() для записи мгновенного события или метки времени в временная шкала. Вы можете пометить начало или конец конкретной операции или любую интересующую точку, которая не имеет длительности. При включении devtools объекта в detail свойство средство "Производительность " отображает настраиваемый маркер в дорожке "Время ".

• Используйте performance.measure() для измерения длительности задачи или процесса. При включении devtools объекта в detail свойство средство "Производительность" отображает пользовательские записи измерений в временная шкала в пользовательской дорожке. Если вы используете performance.mark() в качестве точки отсчета performance.measure()для создания объекта , вам не нужно включать devtools объект в performance.mark() вызовы.

devtools объект

Эти типы определяют структуру devtools объекта для различных функций расширения:

type DevToolsColor =
  "primary" | "primary-light" | "primary-dark" |
  "secondary" | "secondary-light" | "secondary-dark" |
  "tertiary" | "tertiary-light" | "tertiary-dark" |
  "error";

interface ExtensionTrackEntryPayload {
  dataType?: "track-entry";        // Defaults to "track-entry"
  color?: DevToolsColor;           // Defaults to "primary"
  track: string;                   // Required: Name of the custom track
  trackGroup?: string;             // Optional: Group for organizing tracks
  properties?: [string, string][]; // Key-value pairs for detailed view
  tooltipText?: string;            // Short description for tooltip
}

interface ExtensionMarkerPayload {
  dataType: "marker";              // Required: Identifies as a marker
  color?: DevToolsColor;           // Defaults to "primary"
  properties?: [string, string][]; // Key-value pairs for detailed view
  tooltipText?: string;            // Short description for tooltip
}

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

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

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

1. Откройте демонстрационную веб-страницу "Фотоальбом" в новом окне или на вкладке.

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

   1. Клонируйте репозиторий MicrosoftEdge / Demos на каждый клонируйте репозиторий Демонстраций Edge на диск.
   2. Запустите сервер localhost в клонированном /demos/ каталоге в разделе Запуск локального сервера в примере кода для средств разработки.
   3. В браузере перейдите по адресу http://localhost:8080/photo-gallery/ или эквиваленту в новом окне или вкладке.

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

   Откроется devTools.

3. В средствах разработки выберите средство Производительность ().

4. В средстве Производительность нажмите кнопку Параметры захвата (), а затем убедитесь, что установлен флажок Показывать настраиваемые дорожки :

   

5. В раскрывающемся списке Регулирование ЦП выберите 4x замедление — рекомендуется.

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

6. Обновите страницу, чтобы удалить все выбранные элементы.

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

8. В верхней части демонстрационной страницы в раскрывающемся меню Камера () слева перейдите с Все на Apple iPhone 12.

9. Измените фильтр камеры обратно на Все.

10. Щелкните первую фотографию.

    Фотография расширяется.

11. В средствах разработки нажмите кнопку Остановить .

    Отобразится профиль.

12. Щелкните Настройка и управление средствами разработки (), а затем рядом с полем Расположение док-станции выберите Открепить в отдельное окно (

    DevTools отсоединяется в собственном окне, поэтому проще просматривать больше данных.

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

14. Разверните пользовательские дорожки:

    • Создание фотографий
    • Дорожка метки времени консоли

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

    

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

    Отобразится пользовательская подсказка, включая длительность и подпись.

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

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

Код, определяющий эти настраиваемые меры производительности, показан в разделе Добавление настраиваемых дорожек и записей в временная шкала (performance.measure())ниже.

Примеры кода

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

console.timeStamp() Примеры API

Например, в фотоальбоме или gallery.jsloadPhoto() функция определяет startTime и endTime путем вызова performance.now(), а затем вызывает console.timeStamp() , чтобы отобразить время, необходимое для загрузки фотографии после нажатия этой фотографии:

// Load a photo and return a promise that resolves when the photo is loaded.
function loadPhoto(fileName) {
  // Record the start time of the photo loading for performance tracking.
  const startTime = performance.now();

  return new Promise(resolve => {
    // Load the image by creating a new image element.
    const imageEl = document.createElement("img");
    imageEl.src = fileName;

    // Listen for the load event to resolve the promise when the image is loaded.
    imageEl.addEventListener('load', () => {
      // Record the end time of the photo loading.
      const endTime = performance.now();

      // Display the photo loading duration in the Performance tool, by using console.timeStamp.
      console.timeStamp("Loading photo",              // label
                        startTime,                    // start
                        endTime,                      // end
                        "Console timestamp track",    // trackName
                        "Custom performance timings", // trackGroup
                        "primary-dark");              // color

      resolve(imageEl);
    }, { once: true });
  });
}

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

1. Выполните действия, описанные выше в разделе Просмотр пользовательских данных в профиле производительности.

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

3. Разверните дорожку Метка времени консоли.

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

   

   Событие "Загрузка фотографии " было создано с помощью console.timeStamp(). Это событие имеет длительность, так как оно создается со временем начала и окончания. Это событие соответствует времени, затраченного на загрузку полноэкранной версии выбранной фотографии.

См. также:

• Внедрение данных с помощью console.timeStamp() (выше) — синтаксис.
• performance.now()

Примеры API синхронизации пользователей

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

• Добавление пользовательских дорожек и записей в временная шкала (performance.measure())
• Добавление маркеров в дорожку "Синхронизация" (performance.mark())

Добавление пользовательских дорожек и записей в временная шкала (performance.measure())

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

Например, в фотоальбоме или gallery.jspopulateGallery() функция определяет startTime и endTime путем вызова performance.now(), а затем вызывает performance.measure() , чтобы показать время, необходимое для создания фотографии в коллекции:

// Populate the gallery with the given images.
function populateGallery(images) {
  // Empty the existing gallery elements.
  galleryEl.innerHTML = '';

  // Iterate over the images.
  images.forEach(({ file, user, description, w, h, meta }) => {
    // Record the start time of this image creation for performance tracking.
    const startTime = performance.now();

    // Create the necessary DOM elements, and append them to the gallery.
    const liEl = createImageDOM(file, user, description, meta, w, h);
    galleryEl.appendChild(liEl);

    // Record the end time of this image creation.
    const endTime = performance.now();

    // Display the image creation duration in the Performance tool
    // by using the performance.measure API, with the devtools
    // object.
    performance.measure(`Image ${file} created`, {
      start: startTime,
      end: endTime,
      detail: {
        devtools: {
          dataType: "track-entry",
          color: "primary",
          trackGroup: "Custom performance timings",
          track: "Photo creation",
          properties: [
            ['File', file],
            ['Width', w],
            ['Height', h],
            ['User', user],
          ],
          tooltipText: `Image ${file} created`
        }
      },
    });
  });
}

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

1. Выполните действия, описанные выше в разделе Просмотр пользовательских данных в профиле производительности.

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

3. Разверните дорожку создания фотографий .

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

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

   

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

   События создания фотографии отображаются между Start filtering метками производительности и Done filtering , которые возникают в результате performance.mark() (рассматривается в следующем разделе):

   

См. также:

• performance.measure()
• performance.now()

Добавление маркеров в дорожку "Синхронизация" (performance.mark())

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

Например, в фотоальбоме или gallery.jsпрослушиватель событий обрабатывает события в раскрывающихся списках фильтров демонстрационной страницы input . Прослушиватель событий вызывает performance.mark() дважды: до применения нового фильтра и после применения нового фильтра:

// Handle input events on the filter selects.
addEventListener('input', e => {
  // Check if the input event is from a filter select.
  // If not, return early.
  const filter = e.target.closest('.filter select');
  if (!filter) {
    return;
  }

  // Add a mark in the Performance tool's recorded profile to
  // indicate that a filter will be applied.
  performance.mark("Start filtering", {
    detail: {
      devtools: {
        dataType: "marker",
        color: "secondary",
        properties: [
          ['Filter Value', filter.value]
        ],
        tooltipText: "Start filtering"
      }
    }
  });

  // Reset the other filters.
  filterEl.querySelectorAll('.filter select').forEach(select => {
    if (select !== filter) {
      select.selectedIndex = 0;
    }
  });

  // Apply the filter based on the selected value.
  filterBy(filter);

  // Add a mark in the Performance tool's recorded profile to
  // indicate that a filter was applied.
  performance.mark("Done filtering", {
    detail: {
      devtools: {
        dataType: "marker",
        color: "tertiary",
        properties: [
          ['Filter Value', filter.value]
        ],
        tooltipText: "Done filtering"
      }
    }
  });
});

// Handle click events on photos.
addEventListener('click', e => {
  const clickedPhoto = e.target.tagName === 'IMG' && e.target.closest('.photo');
  if (!clickedPhoto) {
    return;
  }

  // Add a mark in the Performance tool's recorded profile to
  // indicate that a photo was clicked.
  performance.mark("Photo selected", {
    detail: {
      devtools: {
        dataType: "marker",
        color: "secondary-dark",
        properties: [
          ['photo', clickedPhoto.src]
        ],
        tooltipText: "Photo selected"
      }
    }
  });

  selectPhoto(clickedPhoto);
});

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

1. Выполните действия, описанные выше в разделе Просмотр пользовательских данных в профиле производительности.

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

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

   

   События (маркеры), созданные пользователем performance.mark() , не имеют длительности. Они просто отмечают некоторые интересные события в профиле: начало и конец изменения фильтра (с помощью раскрывающихся меню демонстрационной страницы) и момент выбора фотографии (маркер выбора фотографии ).

См. также:

• Производительность: метод mark()

См. также

MDN:

• Спецификация расширения console.timeStamp — 6-параметрная версия метода.
  • console: статический метод timeStamp() — версия метода с 1 параметром.
• API производительности
  • Время пользователя в API производительности веб-API > .
• Производительность: метод mark()
• Производительность: метод measure()
• Производительность: метод now()
• Производительность: свойство timeOrigin

Демос:

• Фотоальбом — работающее веб-приложение.
  • photo-gallery/gallery.js — исходный код.

Примечание.

Части этой страницы являются изменениями, основанными на работе, созданной и совместно используемой Google и используемой в соответствии с условиями, описанными в международной лицензии Creative Commons Attribution 4.0. Авторами оригинальной страницы являются Андрес Оливарес и Софья Емельянова.

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