Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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.

like image 777
srikant Avatar asked Jul 17 '13 05:07

srikant


2 Answers

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.

like image 24
Mandar Katre Avatar answered Oct 18 '22 07:10

Mandar Katre


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:

enter image description here

like image 192
Jonathan Lonowski Avatar answered Oct 18 '22 07:10

Jonathan Lonowski