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

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

• PerformanceMark записи — это метки, которые вы можете именовать и добавлять в любом месте приложения.
• PerformanceMeasure записи — это измерения времени между двумя метками.

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

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

Преимущество использования этого API перед вызовами Date.now() или performance.now() заключается в том, что вы можете назначить меткам имя и что он хорошо интегрируется с инструментами для анализа производительности. Инструменты разработчика браузера могут отображать метки производительности на панелях производительности, и он также работает с другими API производительности, такими как PerformanceObserver объекты.

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

Метод performance.mark() используется для создания PerformanceMark. Метод принимает один аргумент, name метки, как показано в следующем примере.

// Place at a location in the code that starts login
performance.mark("login-started");

// Place at a location in the code that finishes login
performance.mark("login-finished");

Если аргумент name недостаточно, mark() можно настроить с помощью объекта options, где вы можете поместить дополнительную информацию в свойство detail, которое может быть любого типа. Вы также можете установить другой startTime при необходимости. В следующем коде startTime установлено в значение 12.5, а дополнительная информация, например, используемый HTML-элемент, предоставляется с помощью detail.

performance.mark("login-started", {
  startTime: 12.5,
  detail: { htmlElement: myElement.id },
});

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

Метод Performance.measure() используется для создания PerformanceMeasure объекта. Он принимает параметр name, используемый для идентификации измерения, и две метки, start и end, между которыми должно быть измерение. В следующем примере создаётся измерение "login-duration" и измеряется время между началом и завершением процесса входа в систему.

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

const loginMeasure = performance.measure(
  "login-duration",
  "login-started",
  "login-finished",
);

console.log(loginMeasure.duration);

Метод Performance.measure() также можно настроить с помощью объекта options, поэтому вы можете выполнять более сложные измерения или предоставлять дополнительную информацию, используя свойство detail.

Например, вы можете использовать свойство event.timestamp из события click события нажатия, чтобы точно знать, когда пользователь нажал кнопку «войти» и измерить это до момента обновления интерфейса, что является меткой "login-finished" здесь.

loginButton.addEventListener("click", (clickEvent) => {
  fetch(loginURL).then((data) => {
    renderLoggedInUser(data);

    const marker = performance.mark("login-finished");

    performance.measure("login-click", {
      detail: { htmlElement: myElement.id },
      start: clickEvent.timeStamp,
      end: marker.startTime,
    });
  });
});

Предпочтительный способ получения уведомлений о ваших пользовательских измерениях производительности — использование PerformanceObserver объектов. Объекты наблюдателей за производительностью позволяют вам пассивно подписываться на метки и измерения производительности по мере их возникновения.

function perfObserver(list, observer) {
  list.getEntries().forEach((entry) => {
    if (entry.entryType === "mark") {
      console.log(`${entry.name}'s startTime: ${entry.startTime}`);
    }
    if (entry.entryType === "measure") {
      console.log(`${entry.name}'s duration: ${entry.duration}`);
    }
  });
}
const observer = new PerformanceObserver(perfObserver);
observer.observe({ entryTypes: ["measure", "mark"] });

Дополнительную информацию см. в PerformanceObserver.

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

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

Метод performance.getEntries() получает все записи производительности. Вы можете фильтровать их по мере необходимости.

const entries = performance.getEntries();
entries.forEach((entry) => {
  if (entry.entryType === "mark") {
    console.log(`${entry.name}'s startTime: ${entry.startTime}`);
  }
  if (entry.entryType === "measure") {
    console.log(`${entry.name}'s duration: ${entry.duration}`);
  }
});

Метод performance.getEntriesByType(entryType) фильтрует записи по типу.

const marks = performance.getEntriesByType("mark");
marks.forEach((entry) => {
  console.log(`${entry.name}'s startTime: ${entry.startTime}`);
});

const measures = performance.getEntriesByType("measure");
measures.forEach((entry) => {
  console.log(`${entry.name}'s duration: ${entry.duration}`);
});

Метод performance.getEntriesByName(name, entryType) позволяет получить конкретные метки или измерения по имени.

// Log all marks named "debug-marks"
const debugMarks = performance.getEntriesByName("debug-mark", "mark");
debugMarks.forEach((entry) => {
  console.log(`${entry.name}'s startTime: ${entry.startTime}`);
});

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

• performance.clearMarks()
• performance.clearMeasures()

// Clear all marks
performance.clearMarks();

// Removes the marker with the name "myMarker"
performance.clearMarks("myMarker");

// Clear all measures
performance.clearMeasures();

// Removes the measure with the name "myMeasure"
performance.clearMeasures("myMeasure");

• Performance
• PerformanceMark
• PerformanceMeasure
• PerformanceEntry
• PerformanceObserver