利用可能なブラウザ
- Google Chrome Ver18〜
- Firefox 7〜
- Android OS Ver4〜
概要
Webサイトの制作では、ページデータの読み込み時間が問題になることがあります。ページが表示されるまでに時間がかかると、ユーザーのストレスが増加し、場合によってはユーザーが離れてしまう場合もあります。すばやく表示されるWebサイトであれば、ユーザーも使いやすいはずです。また、Googleはページの表示速度を検索結果の順位算出に使っていると明らかにしています（Googleの発表）。
ページの読み込み速度はJavaScriptで計測できます。ところが、JavaScriptではHTMLファイルが読み込まれHTMLの解釈が始まった段階からしか計測できず、どの処理に時間がかかっているのか、詳細な処理時間を把握できません。
そこで登場したのが、「Navigation Timing API」です。Navigation Timing APIは、DNSの処理時間や、HTTPリクエスト／レスポンス時間など、HTMLの処理の前段階から計測します。さまざまなタイミングで自動的にパフォーマンスが計測され、結果が各種プロパティに格納されます。
引用: http://ascii.jp/elem/000/000/675/675568/#ixzz1raCVZFi1
APIについて
windowオブジェクトのオブジェクトwindow.performanceに必要な情報が全て詰め込まれている.
window.performance.navigation
プロパティに type と redirectCount を持つオブジェクト. typeの値は, 0/1/2/255のいずれか1つを取る. ただし, 255は将来のために予約語として確保しているだけで現仕様では, 0/1/2のいずれかになる.
- 0: TYPE_NAVIGATE(クリックされたかURLを入力してページに移動してきた)
- 1: TYPE_RELOAD(リロードしてページを表示した)
- 2: TYPE_BACK_FORWARD(ブラウザの「進む」「戻る」ボタンでページを移動した)
プロパティ redirectCount は, その名の通り, 最終的なドキュメントに辿り着くまでに何回リダイレクトされたかを表す.
window.performance.timing
window.performance.timingオブジェクトは ユーザーがページを開こうとしたとき(ナビゲーション開始)からロードが終わるまでの各イベント毎の時間情報を取得できる.
var timing = window.performance.timing;
console.log(timing.navigationStart); // ナビゲーション開始時刻
console.log(timing.redirectStart); // リダイレクト開始時刻, 0の場合はリダイレクトなし
console.log(timing.redirectEnd); // リダイレクト終了時刻, 0の場合はリダイレクトなし
console.log(timing.fetchStart); //
console.log(timing.domainLookupStart); //
console.log(timing.domainLookupEnd); //
console.log(timing.connectStart); //
console.log(timing.connectEnd); //
console.log(timing.requestStart); //
console.log(timing.responseStart); //
console.log(timing.responseEnd); // レスポンスを全て受け取った
console.log(timing.domLoading); //
console.log(timing.domInteractive); //
console.log(timing.domContentLoadedEventStart); //
console.log(timing.domContentLoadedEventEnd);
console.log(timing.domComplete); // DOMの構築が完了した
console.log(timing.loadEventStart); // onLoadイベントが開始された
console.log(timing.loadEventEnd); // onLoadイベントが終了した.
実際に利用するときには, これらそれぞれの値1つづつには大きな意味はなく, 2つの項目の差 に着目することになります. 具体的には以下の項目に着目します.
var timing = window.performance.timing;
console.log("リダイレクト: " + (timing.redirectEnd - timing.redirectStart));
console.log("アプリケーション・キャッシュ: " + (timing.domainLookupStart - timing.fetchStart));
console.log("DNS取得時間: " + (timing.domainLookupEnd - timing.domainLookupStart));
console.log("TCP接続時間: " + (timing.connectEnd - timing.connectStart));
console.log("リクエスト時間: " + (timing.responseStart - timing.requestStart));
console.log("レスポンス時間: " + (timing.responseEnd - timing.responseEnd));
console.log("DOMの構築時間: " + (timing.domComplete - timing.domLoading));
console.log("onLoadイベント: " + (timing.loadEventEnd - timing.loadEventStart));