Navigation Timing API

ナビゲーションタイミングエーピーアイ（API & Web機能）

意味ナビゲーション時間計測API

Navigation Timing APIとは？

Navigation Timing APIは、ナビゲーションイベントのタイミング情報を取得するためのAPIです。

Navigation Timing APIの具体的な使い方

Navigation Timing APIを使用してページロードの詳細な時間を計測する例

// ページが完全に読み込まれた後に実行
window.addEventListener('load', function() {
  let perfEntry = performance.getEntriesByType('navigation')[0];

  // DNS解決時間
  let dnsTime = perfEntry.domainLookupEnd - perfEntry.domainLookupStart;

  // TCP接続時間
  let tcpTime = perfEntry.connectEnd - perfEntry.connectStart;

  // サーバーレスポンス時間
  let serverTime = perfEntry.responseStart - perfEntry.requestStart;

  // ページロード時間
  let loadTime = perfEntry.loadEventEnd - perfEntry.navigationStart;

  console.log('DNS解決時間: ' + dnsTime.toFixed(2) + ' ミリ秒');
  console.log('TCP接続時間: ' + tcpTime.toFixed(2) + ' ミリ秒');
  console.log('サーバーレスポンス時間: ' + serverTime.toFixed(2) + ' ミリ秒');
  console.log('総ページロード時間: ' + loadTime.toFixed(2) + ' ミリ秒');
});

👇出力結果

DNS解決時間: 12.34 ミリ秒
TCP接続時間: 23.45 ミリ秒
サーバーレスポンス時間: 34.56 ミリ秒
総ページロード時間: 1234.56 ミリ秒

Navigation Timing APIを使用して、ページロードプロセスの詳細な時間を計測します。DNS解決時間、TCP接続時間、サーバーレスポンス時間、総ページロード時間などの情報をコンソールに出力します。

Navigation Timing APIに関するよくある質問

Q. Navigation Timing APIとは？

A. Navigation Timing APIは、ウェブページのナビゲーション（読み込み）プロセスに関する詳細なタイミング情報を提供するAPIです。

Q. Performance APIとの違いは？

A. Navigation Timing APIはPerformance APIの一部で、特にページナビゲーションに焦点を当てています。より詳細なナビゲーション関連のタイミング情報を提供します。

Q. 主にどんな用途がありますか？

A. ページの読み込みパフォーマンスの分析、ユーザー体験の改善、サーバーレスポンス時間の測定、リソース読み込み時間の最適化などに使用されます。

Navigation Timing APIが学べる書籍の紹介

「プログラミング単語帳」を使って、プログラミングの単語を英単語のように学習してみませんか？
プログラミング単語帳には、JavaScriptのNavigation Timing APIやWebVR、XMLHttpRequest、File API、などのような実務でよく使われる単語が数百以上収録されています。
この書籍には、プログラミングの単語の意味や読み方、単語の使い方がわかる例文などが掲載されており、いつでもどこでもプログラミングの学習ができます。

よく使われる単語にだけ絞って学習することができるので、効率的にプログラミングが学習できます。