十五章第二回 Navigation Timing
このページの最終更新日：
今回紹介するNavigation Timing APIは、ページを表示するときの時間経過とかを知ることができるAPIです。
ページを表示するのにどれだけかかったのかとか、そういう詳細情報を得ることができるのです。
前回も説明したように、Webアプリケーションがサクサク動くかどうかは死活問題です。ですので、ページを開くときに、例えば読み込みに時間がかかってしばらく画面が真っ白みたいなことが起こると大問題です。このAPIを使うとどこに時間がかかっているかという情報を得ることができ、読み込みが遅い場合の改善のヒントとなります。
このAPIは大きく分けて2つの部分からなっています。時間に関する情報を表すPerformanceTimingとその他に関するPerformanceNavigationです。
APIを使うには、window.performanceに入っているPerformanceオブジェクトを用います。ブラウザ上だとwindowのプロパティはグローバル変数として参照できるのはいまさら言うまでもありませんね。
このオブジェクトは、PerformanceTimingたるtimingプロパティと、PerfomanceNavigationたるnavigationプロパティの2つを持っています。
PerformanceTiming
PerformanceTimingはさまざまなタイミングを時刻で表すプロパティを持っています。今回、時刻は全て整数値で表されています。これは、世界標準時で1970年1月1日午前0時0分0秒ちょうどから経過したミリ秒数を表しています。この形式は数値で時刻を表すための結構一般的な方法で、UNIX timeと呼ばれます。UNIX timeというときはミリ秒ではなく秒数で表すことが多いようですが、JavaScriptではミリ秒とすることのほうが多いです。例えば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までの時間を計算すればよいでしょう。
それを知ったあとそれを使って何をするかはあなた次第です。
実際に通信にかかった時間を表示するサンプルを用意しました。恐らく2回目以降は1回目よりも表示される時間が短いと思います。これはキャッシュが効いているためですね。
また、このサンプルをパソコンに保存してからブラウザで開いてみると、通信にかかった時間の代わりにページをファイルから読みこむのにかかった時間を計算してくれます。
PerformanceNavigation
さて、もう一つがPerformanceNavigationです。その他といいましたが、実はここで得られる情報は2つだけです。
1つはtypeプロパティに入っていて、これはこのページを開いたときのナビゲーションの種類を表す数値です。これは以下の4種類があります。例によって定数が用意されていますので、それで説明します。
- TYPE_NAVIGATE
- リンクをクリックしたりアドレスをアドレスバーに入力して開いたときのような、通常のページ移動。
- TYPE_RELOAD
- ページを更新したとき。
- TYPE_BACK_FORWARD
- 「戻る」ボタンや「進む」ボタンで移動してきたとき。
- TYPE_RESERVED
- 上の分類に当てはまらない特殊な方法のとき。
これらの定数はPerformanceNavigationオブジェクトのプロパティです。
これを用いたサンプル2を用意しました。まずは普通に開いて、その後ページを更新したりこのページと「戻る」「進む」ボタンで行き来してみましょう。3種類の異なる表示を見ることができます。
PerformanceNavigationから得られるもう一つの情報は、リダイレクトの回数です。このページを開いた時に何回リダイレクトを経由したかの数値が、redirectCountプロパティに入っています。ただし、リダイレクトで違うオリジンを経由した場合はセキュリティ上の理由で0になります。
以上がNavigation Timingの全てです。
ちなみに、強化版のNavigation Timing 2というのが今作成中だそうです。そのうち紹介します。