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

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

図 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 オプションを使用します。

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 リファレンスドキュメント内のプロパティページを参照してください。

関連情報

• PerformanceNavigationTiming
• PerformanceResourceTiming