読み込み時間を計測する
Navigation Timing APIにはメソッドはありません。計測時間を示すプロパティだけがあり、各プロパティに対応する時間がミリ秒で格納されます。
読み込みタイミングとプロパティ名の対応を以下の図に示します。図は上から順番に処理されていきます。
読み込みタイミングとプロパティ名
Webページは検索エンジンなどを経由して表示される場合もあれば、ブラウザーをリロードして表示される場合もあります。Navigation Timing APIにはページがどのように呼び出されたかを知るためのプロパティも用意されています。
performance.navigation.type
performance.navigation.typeの値は0, 1, 2, 255のいずれかになります。255は将来、何かの意味を持たせるために予約してあるだけですので、実際に返される値は0,1,2です。これらの値の意味は以下のようになります。
| 0 | TYPE_NVIGATE | クリックされたかURLを入力してページに移動してきた |
| 1 | TYPE_RELOAD | リロードしてページを表示した |
| 2 | TYPE_BACK_FORWARD | ブラウザーの「進む」｢戻る」ボタンでページ移動した |
実際にperformance.navigation.typeを利用したプログラムがサンプル1です。実行すると、どのようにしてページにアクセスしたかが表示されます。
新規にページにアクセスした場合
ページをリロードした場合
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Navigation Type結果</title>
</head>
<body>
<h1>Navigation Type結果</h1>
<form>
<input type="button" id="btn" value="結果表示">
</form>
<output id="result"></output>
<script>
document.getElementById("btn").onclick = function(){
var msg = ["クリックかURL入力", "リロードしました", "ヒストリーを利用"];
var type = performance.navigation.type; // 種類
document.getElementById("result").innerHTML = msg[type];
}
</script>
</body>
</html>
次に、ページの読み込みにかかった時間を計測して表示してみましょう。ページ全体の処理にかかる時間は、domCompleteの値からnavigationStartの値を引くと求められます。なお、ページが読み込まれた後に発生するloadイベントで何らかの処理をしている場合は、domCompleteでなくloadEventEndの値からnavigationStartの値を引いてください。
サンプル2が実際のプログラムです。ボタンをクリックするとページの読み込み、表示にかかった時間がミリ秒で表示されます。
Google Chromeでの結果
Firefoxでの結果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Navigation Timing計測結果</title>
</head>
<body>
<h1>Navigation Timing計測結果</h1>
<form>
<input type="button" id="btn" value="結果表示">
</form>
<output id="result"></output>
<script>
document.getElementById("btn").onclick = function(){
var startTime = performance.timing.navigationStart;
var endTime = performance.timing.domComplete;
var text = (endTime - startTime)+"ミリ秒<br>";
document.getElementById("result").innerHTML = text;
}
</script>
</body>
</html>
すべてのタイミングを表示
前の図に示したように、Navigation Timing APIにはさまざまなプロパティがあります。
サンプル2では計測結果が問題なく表示できましたが、セキュアな接続時に計測されるsecureConnectionStartのように、その処理が発生しない場合は計測時間が格納されないことがあります（ブラウザーによって動作が違うようです）。実際に計測結果を示すには、値が格納されていない場合も考慮する必要があります。
サンプル3はunloadEventStartとunloadEventEnd以外、すべての計測結果を表示します。値が計測されない場合は横棒を表示します。
Google Chromeでの計測結果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Navigation Timing計測結果</title>
</head>
<body>
<h1>Navigation Timing計測結果</h1>
<form>
<input type="button" id="btn" value="結果表示">
</form>
<output id="result"></output>
<script>
document.getElementById("btn").onclick = function(){
var now = (new Date()).getTime();
var param = [
"navigationStart", "unloadEventStart", "unloadEventEnd", "redirectStart",
"redirectEnd", "fetchStart", "domainLookupStart", "domainLookupEnd",
"connectStart", "connectEnd", "secureConnectionStart", "requestStart",
"responseStart", "responseEnd", "domLoading", "domInteractive",
"domContentLoaded", "domComplete", "loadEventStart", "loadEventEnd"
];
var startTime = performance.timing.navigationStart;
var text = "";
for(var i=0; i<param= 0){
text += param[i]+" : "+(measureTime - startTime)+"ミリ秒<br>";
}else{
text += param[i]+" : ━━━<br>";
}
}
document.getElementById("result").innerHTML = text;
}
</script>
<!-- 時間のかかる処理 -->
<script>
for(var i=0; i<10000; i++){
document.write("<table border=1><tr><th>"+i+"</th><td>"+i*2+"</td></tr></table>");
}
</script>
</body>
</html>
