1. このページの目的
Navigation Timing Level 2 を使い、本Webページのロード処理に関するパフォーマンスを測定する。
※ 実験的機能である（2020年12月）。
2. 本ページで実行しているソースコード（抜粋）
JavaScript
function showNavigationDetails() {
let perfEntries = performance.getEntriesByType("navigation");
for (let i=0; i < perfEntries.length; i++) {
console.log("= Navigation entry[" + i + "]");
let p = perfEntries[i];
// いろいろな掛かった時間
console.log("Domain Lookup に掛かった時間 = " + (p.domainLookupEnd - p.domainLookupStart));
console.log("Connect に掛かった時間 = " + (p.connectEnd - p.connectStart));
console.log("Response に掛かった時間 = " + (p.responseEnd - p.responseStart));
// dom Properties
console.log("DOM content loaded に掛かった時間 = " + (p.domContentLoadedEventEnd - p.domContentLoadedEventStart));
console.log("DOM complete = " + p.domComplete);
console.log("DOM interactive = " + p.interactive);
// document load and unload time
console.log("document load に掛かった時間 = " + (p.loadEventEnd - p.loadEventStart));
console.log("document unload に掛かった時間 = " + (p.unloadEventEnd - p.unloadEventStart));
// other properties
console.log("type = " + p.type);
console.log("redirectCount = " + p.redirectCount);
console.table(p.toJSON());
}
}
HTML
<body onload="showNavigationDetails()">
3. 結果
- DevTools の Console パネルに出力される。
4. 参考情報
PerformanceNavigationTiming interface
[Exposed=Window]
interface PerformanceNavigationTiming : PerformanceResourceTiming {
readonly attribute DOMHighResTimeStamp unloadEventStart;
readonly attribute DOMHighResTimeStamp unloadEventEnd;
readonly attribute DOMHighResTimeStamp domInteractive;
readonly attribute DOMHighResTimeStamp domContentLoadedEventStart;
readonly attribute DOMHighResTimeStamp domContentLoadedEventEnd;
readonly attribute DOMHighResTimeStamp domComplete;
readonly attribute DOMHighResTimeStamp loadEventStart;
readonly attribute DOMHighResTimeStamp loadEventEnd;
readonly attribute NavigationType type;
readonly attribute unsigned short redirectCount;
[Default] object toJSON();
};
PerformanceNavigationTiming interface のプロパティを使う例
// いろいろな掛かった時間
Domain Lookup に掛かった時間 = domainLookupEnd - p.domainLookupStart
Connect に掛かった時間 = connectEnd - p.connectStart
Response に掛かった時間 = responseEnd - p.responseStart
// dom Properties
DOM content load に掛かった時間 = domContentLoadedEventEnd - domContentLoadedEventStart
DOM complete = domComplete
DOM interactive = interactive
// document load and unload time
document load に掛かった時間 = loadEventEnd - loadEventStart
document unload に掛かった時間 = unloadEventEnd - unloadEventStart
5. メモ
PerformanceNavigationTiminginterfacea のプロパティは、まだはっきり仕様が決まっていないようだ。