| <!DOCTYPE HTML> |
| <meta charset=utf-8> |
| <title>PerformanceObservers: resource</title> |
| <h1>PerformanceObservers: resource</h1> |
| <script> |
| function onload() { |
| function path(pathname) { |
| var filename = pathname.substring(pathname.lastIndexOf('/') + 1); |
| return pathname.substring(0, pathname.length - filename.length); |
| } |
| var stored_entries = []; |
| var img_location = document.location.origin + path(document.location.pathname) |
| + "resources/square.png"; |
| var img1 = img_location; |
| resourceObserver = new PerformanceObserver(list => { |
| list |
| .getEntries() |
| // Get the values we are interested in |
| .map(({ name, startTime, fetchStart, responseStart, responseEnd }) => { |
| const obj = { |
| "Name": name, |
| "Start Time": startTime, |
| "Fetch Start": fetchStart, |
| "Response Start": responseStart, |
| "Response End": responseEnd, |
| }; |
| return JSON.stringify(obj, null, 2); |
| }) |
| // Display them to the console. |
| .forEach(console.log); |
| // Disconnect after processing the events. |
| resourceObserver.disconnect(); |
| }); |
| resourceObserver.observe({ entryTypes: ["resource"] }); |
| var img = document.createElement("img"); |
| img.src = img1; |
| document.body.appendChild(img); |
| } |
| onload(); |
| </script> |
