新JavaScript例文辞典

説明

ページデータ読み込み時の様々な処理時間を取得するにはNavigation Timingを利用します。処理された時間はwindowオブジェクトのperformanceオブジェクトのtimingオブジェクトに入っています。非常に多くのプロパティが用意されています。どのプロパティが、どのタイミングに該当するかはNavigation Timing (w3c)のページを参照してください。
2012年1月時点ではFirefox 9とGoogle Chrome 16が対応しています。

サンプルプログラム

window.onload = function(){
var now = (new Date()).getTime();
var t = "navigationStart : "+(now - performance.timing.navigationStart);
t += " unloadEventStart : "+(now - performance.timing.unloadEventStart);
t += " unloadEventEnd : "+(now - performance.timing.unloadEventEnd);
t += " redirectStart : "+(now - performance.timing.redirectStart);
t += " redirectEnd : "+(now - performance.timing.redirectEnd);
t += " fetchStart : "+(now - performance.timing.fetchStart);
t += " domainLookupStart : "+(now - performance.timing.domainLookupStart);
t += " domainLookupEnd : "+(now - performance.timing.domainLookupEnd);
t += " connectStart : "+(now - performance.timing.connectStart);
t += " connectEnd : "+(now - performance.timing.connectEnd);
t += " secureConnectionStart : "+(now - performance.timing.secureConnectionStart);
t += " requestStart : "+(now - performance.timing.requestStart);
t += " responseStart : "+(now - performance.timing.responseStart);
t += " responseEnd : "+(now - performance.timing.responseEnd);
t += " domLoading : "+(now - performance.timing.domLoading);
t += " domInteractive : "+(now - performance.timing.domInteractive);
t += " domContentLoadedEventStart : "+(now - performance.timing.domContentLoaded);
t += " domContentLoadedEventEnd : "+(now - performance.timing.domContentLoaded);
t += " domComplete : "+(now - performance.timing.domComplete);
t += " loadEventStart : "+(now - performance.timing.loadEventStart);
t += " loadEventEnd : "+(now - performance.timing.loadEventEnd);
document.getElementById("result").innerHTML = t;
}