uhyohyo.net

JavaScript初級者から中級者になろう

十五章第二回 Navigation Timing

今回紹介するNavigation Timing APIは、ページを表示するときの時間経過とかを知ることができるAPIです。

ページを表示するのにどれだけかかったのかとか、そういう詳細情報を得ることができるのです。

このAPIは大きく分けて2つの部分からなっています。時間に関する情報を表すPerformanceTimingとその他に関するPerformanceNavigationです。

APIを使うには、window.performanceに入っているPerformanceオブジェクトを用います。ブラウザ上だとwindowのプロパティはグローバル変数として参照できますね。

このオブジェクトは、PerformanceTimingたるtimingプロパティと、PerfomanceNavigationたるnavigationプロパティの2つを持っています。

PerformanceTiming

PerformanceTimingはさまざまなタイミングを表すプロパティを持っています。タイミングは全て数値です。これは、世界標準時で1970年1月1日午前0時0分ちょうどから経過したミリ秒数で表されていて、コンピュータで時間を表現するには一般的な形式です。例えば2013年1月1日午前0時0分(世界標準時)だったら、1356998400000になります。

以下ではプロパティを時系列順に列挙します。

navigationStart
簡単に言えば、このページを開こうとした瞬間です。もうちょっと詳しく言うと、beforeunloadイベントの処理が終了したあとunloadイベントが発生する直前の瞬間です。
unloadEventStart
前のページでunloadイベントが発生する直前のタイミングです。ただし、新しくこのページを開いた場合は前のページが存在しないので、0になります。また、前のページが別オリジンのページの場合は、セキュリティ上の理由から0になります。
unloadEventEnd
前のページでunloadイベントの処理が終了した瞬間のタイミングです。unloadEventStartが0のときはunloadEventEndも0になります。
redirectStart
もし前のページから移動した先がリダイレクトでそこを経由してこのページを表示した場合は、リダイレクトを読み込み始めた瞬間です。リダイレクトしていない場合は0です。また、リダイレクト中に他のオリジンを経由した場合も0です。
redirectEnd
リダイレクトがあった場合、リダイレクトページとの通信を終了した瞬間(その情報にしたがってこのページの読み込み処理を開始する直前)です。リダイレクトが無かった場合は0です。
fetchStart
このページを読み込む処理を開始した瞬間です。読み込み処理というのは与えられたURLを解析するところから始まるのでその瞬間です。
domainLookupStart
URLを解析したらDNSを用いて接続先のIPアドレスを取得します。その処理が始まる瞬間です。
domainLookupEnd
同様に、その処理が終了した瞬間です。
connectStart
接続先が決まり、Webサーバーに接続する直前の瞬間です。
connectEnd
Webサーバーとの接続が確立した瞬間です。
secureConnectionStart
プロトコルがHTTPSの場合、そのハンドシェイクを開始した瞬間です。HTTPSでない場合は0です。
requestStart
接続の確立後、HTTPリクエストをサーバーに送る直前の瞬間です。
responseStart
リクエスト送信後、サーバーからの応答を受信し始めた瞬間です。
responseEnd
サーバーからの応答を全て受信した瞬間です。
domLoading
サーバーからの応答をもとにDOMの構築を始めた瞬間です。具体的には、このページに対応するdocumentオブジェクトが生成された瞬間です。
domInteractive
DOMの構築が終了した瞬間(HTMLのパースが終了した瞬間)です。
domContentLoadedEventStart
DOMの構築が終了したあと、DOMContentLoadedイベントが発生しますが、それが発生する直前の瞬間です。ちなみにパース終了とDOMContentLoadedイベント発生の間には、読み込み終了時に実行するスクリプトが実行される処理が挟まっています。
domContentLoadedEventEnd
DOMContentLoadedイベントの処理が終了した瞬間です。
domComplete
ページの読み込みが全て終了した瞬間です。後述のloadEventStartとの違いがよくわかりません。
loadEventStart
ページの読み込みが終了するとloadイベントが発生しますが、それが発生する直前の瞬間です。
loadEventEnd
loadイベントの処理が終了した瞬間です。

以上です。けっこうたくさんありますね。これらを用いることで、ページ読み込みにかかった時間とかも知ることができます。例えば通信にかかった時間を知りたいなら、fetchStartからresponseEndまでの時間を計算すればよいでしょう。

それを知ったあとそれを使って何をするかはあなた次第です。

実際に通信にかかった時間を表示するサンプルを用意しました。

ちなみにこのサンプルをパソコンに保存してからブラウザで開いてみると、通信にかかった時間の代わりにページをファイルから読みこむのにかかった時間を計算してくれます。

PerformanceNavigation

さて、もう一つがPerformanceNavigationです。その他といいましたが、実はここで得られる情報は2つだけです。

1つはtypeプロパティに入っていて、これはこのページを開いたときのナビゲーションの種類です。これは定数で、以下の意味があります。

TYPE_NAVIGATE
リンクをクリックしたりアドレスをアドレスバーに入力して開いたときのような、通常のページ移動。
TYPE_RELOAD
ページを更新したとき。
TYPE_BACK_FORWARD
「戻る」ボタンや「進む」ボタンで移動してきたとき。
TYPE_RESERVED
上の分類に当てはまらない特殊な方法のとき。

これらの定数はやはりPerformanceNavigationのプロパティです。

これを用いたサンプル2を用意しました。まずは普通に開いて、その後ページを更新したりこのページと「戻る」「進む」ボタンで行き来してみましょう。3種類の異なる表示を見ることができます。

PerformanceNavigationから得られるもう一つの情報は、リダイレクトの回数です。このページを開いた時に何回リダイレクトを経由したかの数値が、redirectCountプロパティに入っています。ただし、リダイレクトで違うオリジンを経由した場合はセキュリティ上の理由で0になります。

以上がNavigation Timingの全てです。

ちなみに、強化版のNavigation Timing 2というのが今作成中だそうです。そのうち紹介します。