blob: 637b110b7027da08ade241bc1bad5b7cb195b775 [file] [log] [blame]
<!DOCTYPE html>
<html>
<head>
<title>Performance Navigation Timing Demo</title>
<style>
body {
background-color: rgb(255, 255, 255);
color: #0047ab;
font-size: 50px;
}
</style>
</head>
<body>
<script>
function LogInfo(info, time) {
var message = info + ": " + time;
console.log(message);
document.getElementById('info').innerHTML += message + ".\n";
}
function path(pathname) {
var filename = pathname.substring(pathname.lastIndexOf('/') + 1);
return pathname.substring(0, pathname.length - filename.length);
}
function loadImage() {
var stored_entries = [];
var img_location = document.location.origin + path(document.location.pathname)
+ "resources/square.png";
var img1 = img_location;
var img = document.createElement("img");
img.src = img1;
document.body.appendChild(img);
}
window.addEventListener("load", function() {
// Load image for logging resource timing info.
loadImage();
// Log performance time now.
let now = window.performance.now();
LogInfo("Performance now", now);
// Get navigation timing entry from performance entry buffer.
let navigationTiming = performance.getEntriesByType("navigation")[0];
// Log performance navigation timing info.
LogInfo("Unload event start", navigationTiming.unloadEventStart);
LogInfo("Unload event end", navigationTiming.unloadEventEnd);
LogInfo("Dom content loaded event start", navigationTiming.domContentLoadedEventStart);
LogInfo("Dom content loaded event end", navigationTiming.domContentLoadedEventEnd);
LogInfo("Dom complete", navigationTiming.domComplete);
LogInfo("Load event start", navigationTiming.loadEventStart);
LogInfo("Load event end", navigationTiming.loadEventEnd);
// Log performance resource timing info.
LogInfo("Fetch start", navigationTiming.fetchStart);
LogInfo("Connect start", navigationTiming.connectStart);
LogInfo("Connect end", navigationTiming.connectEnd);
LogInfo("Request start", navigationTiming.requestStart);
LogInfo("Response start", navigationTiming.responseStart);
// Check navigation type.
let navigationType = "Navigation type: ";
if (navigationTiming.type == PerformanceNavigation.TYPE_NAVIGATE) {
console.log(navigationType + "Navigation");
} else if (navigationTiming.type == PerformanceNavigation.TYPE_RELOAD) {
console.log(navigationType + "Reload");
}
});
</script>
<div>
<span id='info' style='white-space: pre; background-color:#00FF00'></span>
</div>
</body>
</html>