Server Timing の実験

1. このページの目的

Server Timing の実験をする。

2. コード

PerformanceServerTiming - Web APIs | MDN のコードを参考にする。

2.1. サーバー側のPHPコード

ダミーのヘッダを返す。

header('Server-Timing: cache;desc="Cache Read";dur=23.2, db;dur=53, app;dur=47.2');

2.2. クライアント側のJavaScriptコード

Server-Timing ヘッダの値を読み取って、コンソールに表示する。

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 }),
);

3. 参考