We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

ここへジャンプ:

Navigation Timing API は、ウェブサイトのパフォーマンス計測に使用できるデータを提供します。同じ目的に使用される他の JavaScript ベースの機構と異なり、この API はエンドツーエンドのさらに役立つ正確な遅延データを提供できます。

以下の例は、知覚できる読み込み時間の計測方法です:

function onLoad() { 
  var now = new Date().getTime();
  var page_load_time = now - performance.timing.navigationStart;
  console.log("User-perceived page loading time: " + page_load_time);
}

数ミリ秒の間に多くの計測イベントが与えられ、これらには PerformanceTiming インターフェイスを通してアクセスできます。以下は発生順のイベントリストです:

  • navigationStart
  • unloadEventStart
  • unloadEventEnd
  • redirectStart
  • redirectEnd
  • fetchStart
  • domainLookupStart
  • domainLookupEnd
  • connectStart
  • connectEnd
  • secureConnectionStart
  • requestStart
  • responseStart
  • responseEnd
  • domLoading
  • domInteractive
  • domContentLoadedEventStart
  • domContentLoadedEventEnd
  • domComplete
  • loadEventStart
  • loadEventEnd

window.performance.navigation オブジェクトは 2 個の属性を格納しており、ページの読み込みが何によって起こされたか (リダイレクト、戻る・進むボタン、通常の URL 読み込み) を知るために使用します。

window.performance.navigation.type:

定数 説明
TYPE_NAVIGATE 0 リンクのクリックにより開始されたナビゲーション、ユーザーエージェントのアドレスバーへの URL 入力、フォーム送信、または下記の TYPE_RELOAD および TYPE_BACK_FORWARD の使用によるもの以外のスクリプト操作を通した初期化。
TYPE_RELOAD 1 再読み込み操作を通したナビゲーションまたは location.reload() メソッド。
TYPE_BACK_FORWARD 2 履歴をたどる操作を通したナビゲーション。 Navigation through a history traversal operation.
TYPE_UNDEFINED 255 上記に定義されていない形式の任意のナビゲーション。

window.performance.navigation.redirectCount は、リダイレクトが発生した場合の、最終的なページへ到達するまでの間のリダイレクト数を示します。

Navigation Timing API は、クライアント側でパフォーマンスデータを収集して XHR 経由でサーバーへ送信することに使用できます。また、前のページのアンロード時間やドメインの検索時間、window.onload の合計時間など、計測が困難なデータの計測に使用できます。

ページの読み込みに必要な合計時間を計算します:

var perfData = window.performance.timing; 
var pageLoadTime = perfData.loadEventEnd - perfData.navigationStart;

リクエストの応答時間を計算します:

var connectTime = perfData.responseEnd - perfData.requestStart;

仕様

ブラウザーの実装状況

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

機能 Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
基本サポート 6.0 (有) 7 (7) 9 15.0 8
機能 Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
基本サポート 4.0 (有) 15 (15) 9 15.0 8

ドキュメントのタグと貢献者

タグ: 
このページの貢献者: Marsf
最終更新者: Marsf,