ナビゲーションタイミング

ナビゲーションタイミングは、パフォーマンスAPI の一部であり、1 つのページから別のページへの移動に関連する測定基準を指定します。例えば、文書内の読み込みまたは読み込み解除に要する時間を決定したり、DOM の構築が完了し、DOM 操作が可能な状態になるまでの時間を記録したりすることができます。

現在の文書のみが含まれているため、通常は観察するオブジェクトは PerformanceNavigationTiming の 1 つだけです。これは、 PerformanceEntry インターフェイスを "navigation" の entryType で拡張し、PerformanceResourceTiming も継承しているため、文書を読み取るプロセスにおけるタイムスタンプもすべて利用できます。

PerformanceEntry PerformanceResourceTiming PerformanceNavigationTiming

ナビゲーションタイムスタンプ

文書内のタイムスタンプが、取得した順番に列挙されているタイムスタンプ図 図 1 ナビゲーションタイムスタンプ（引用元）

文書のナビゲーションタイムスタンプは（リソースタイミングからのものに加えて）次のとおりです。

  1. startTime: 常に 0 です。
  2. unloadEventStart: （直前のの文書がある場合）現在の文書で unload イベントハンドラーが開始する直前のタイムスタンプ。
  3. unloadEventEnd: （直前のの文書がある場合）現在の文書で unload イベントハンドラーが完了した直後のタイムスタンプ。
  4. domInteractive: DOM の構築が完了し、JavaScript で操作可能な状態になったことを示すタイムスタンプ。
  5. domContentLoadedEventStart: 現在の文書で DOMContentLoaded イベントハンドラーが開始する直前のタイムスタンプ。
  6. domContentLoadedEventEnd: 現在の文書で DOMContentLoaded イベントハンドラーが完了した直後のタイムスタンプ。
  7. domComplete: 文書内のすべてのサブリソースの読み込みが完了した時点のタイムスタンプ。
  8. loadEventStart: 現在の文書の load イベントハンドラーが開始する直前のタイムスタンプ。
  9. loadEventEnd: 現在の文書の load イベントハンドラーが完了した直後のタイムスタンプ。

その他のプロパティ

PerformanceNavigationTiming インターフェイスは、リダイレクトの回数を返す redirectCount や、ナビゲーションの種類を示す type など、追加のプロパティを提供しています。

例

domContentLoadedEventEnd と domContentLoadedEventStart のタイムスタンプを使用して、 DOMContentLoaded イベントハンドラーの処理に要した時間を測定することができます。

例えば、PerformanceObserver を使用すると、ブラウザーのパフォーマンスタイムラインに新しい navigation パフォーマンス項目が記録されるたびに、呼び出し側に通知されます。例えば、オブザーバーが作成される前に記録された項目にアクセスするために、buffered オプションを使用します。

js
const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    const domContentLoadedTime =
      entry.domContentLoadedEventEnd - entry.domContentLoadedEventStart;
    console.log(
      `${entry.name}: DOMContentLoaded 処理時間: ${domContentLoadedTime}ms`,
    );
  });
});

observer.observe({ type: "navigation", buffered: true });

その他の例については、PerformanceNavigationTiming リファレンスドキュメント内のプロパティページを参照してください。

関連情報