Help us understand the problem. What is going on with this article?

Navigation Timing APIの仕様

More than 5 years have passed since last update.

利用可能なブラウザ

  • 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

プロパティに typeredirectCount を持つオブジェクト. 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オブジェクトは ユーザーがページを開こうとしたとき(ナビゲーション開始)からロードが終わるまでの各イベント毎の時間情報を取得できる.

timing.js
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つの項目の差 に着目することになります. 具体的には以下の項目に着目します.

timing2.js
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));

参考サイト

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした