| <!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> |