PerformanceServerTiming

Интерфейс PerformanceServerTiming предоставляет метрики сервера, которые отправляются с ответом в заголовке HTTP Server-Timing.

Доступ к этому интерфейсу ограничен одной областью, но вы можете использовать заголовок Timing-Allow-Origin, чтобы указать домены, которым разрешён доступ к метрикам сервера. Обратите внимание, что этот интерфейс доступен только в защищённых контекстах (HTTPS) в некоторых браузерах.

PerformanceServerTiming.description Только для чтения

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

PerformanceServerTiming.duration Только для чтения

Двойное значение, содержащее длительность метрики, указанной сервером, или значение 0.0.

PerformanceServerTiming.name Только для чтения

Строковое значение имени метрики, указанной сервером.

PerformanceServerTiming.toJSON()

Возвращает JSON-представление объекта PerformanceServerTiming.

Предположим, сервер отправляет заголовок Server-Timing, например, сервер Node.js, подобный этому:

const http = require("http");

function requestHandler(request, response) {
  const headers = {
    "Server-Timing": `
      cache;desc="Cache Read";dur=23.2,
      db;dur=53,
      app;dur=47.2
    `.replace(/\n/g, ""),
  };
  response.writeHead(200, headers);
  response.write("");
  return setTimeout(() => {
    response.end();
  }, 1000);
}

http.createServer(requestHandler).listen(3000).on("error", console.error);

Элементы PerformanceServerTiming теперь наблюдаемы из JavaScript через свойство PerformanceResourceTiming.serverTiming и присутствуют в элементах navigation и resource.

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

const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    entry.serverTiming.forEach((serverEntry) => {
      console.log(
        `${serverEntry.name} (${serverEntry.description}) duration: ${serverEntry.duration}`,
      );
      // Logs "cache (Cache Read) duration: 23.2"
      // Logs "db () duration: 53"
      // Logs "app () duration: 47.2"
    });
  });
});

["navigation", "resource"].forEach((type) =>
  observer.observe({ type, buffered: true }),
);

Пример использования Performance.getEntriesByType(), который показывает только navigation и resource элементы производительности, присутствующие в временной шкале производительности браузера в момент вызова этого метода:

for (const entryType of ["navigation", "resource"]) {
  for (const { name: url, serverTiming } of performance.getEntriesByType(
    entryType,
  )) {
    if (serverTiming) {
      for (const { name, description, duration } of serverTiming) {
        console.log(`${name} (${description}) duration: ${duration}`);
        // Logs "cache (Cache Read) duration: 23.2"
        // Logs "db () duration: 53"
        // Logs "app () duration: 47.2"
      }
    }
  }
}

• Server-Timing
• PerformanceResourceTiming.serverTiming