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 webp

Answer 1

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)

Answer 2

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 3

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.