How to access performance object of every resource in a web page?

Question

I can see, in Chrome Developer tools, loading time, time it took to get a particular resource from server and other info, for all of the resources in a webpage.

I want to capture these stats using JavaScript. How is it possible?

there is window.performance object available, but only for the requested page, not for page resources. Is there any way to access performance object of all of the page resources.

Answer 1

You should be able to use window.performance.getEntries() to get resource-specific stats:

var resource = window.performance.getEntries()[0];

console.log(resource.entryType);  // "resource"
console.log(resource.duration);   // 39.00000000430737
console.log(resource.startTime);  // 218.0000000007567

Sample from the above link:

Answer 2

There is still a bug in latest version of chrome - 29.0.1547.76 m When you raise an xmlhttprequest, lets say while downloading an image, you can see that the resource is downloaded with status code 200 OK in network tab, but the performance.getEntries() or performance.getEntriesByName(resourceUrl) doesn't list the resource entry. When the page load is complete and you evaluate performance.getEntriesByName(resourceUrl) in console, it lists properly. So, there is a lag in chrome while populating the resource entries in performance entries? In IE10, this works perfectly fine.

Answer 3

window.performance.getEntries() may return not all resources. after bufferful some records is disapear need check it before it happend

---

head code part

var storedEntries = [];
var updateStoredEntries = p => {
  storedEntries.concat(
    p.getEntries().filter(rec => /yourRegExp/.test(rec.name))
  )
};
performance.addEventListener('resourcetimingbufferfull', e => {
  updateStoredEntries(e.target)
});

... later part

updateStoredEntries(performance)