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

javascript browser web pageload
srikant picture srikant · Jul 17, 2013 · Viewed 7k times · Source

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

Jonathan Lonowski picture Jonathan Lonowski · Jul 17, 2013

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

Related questions

Why is javascript the only client side scripting language implemented in browsers?

Why don't browsers add support for, say, Python scripting as an alternative to Javascript? Or more general purpose scripting languages? Is there a reason that Javascript is the only one implemented across browsers? After all, the script tag does have …

Read More
How to get the browser to navigate to URL in JavaScript

What is the best (correct, modern, cross-browser, safe) way to get a web browser to navigate to a URL of your choice using JavaScript?

Read More
How can I stop the browser back button using JavaScript?

I am doing an online quiz application in PHP. I want to restrict the user from going back in an exam. I have tried the following script, but it stops my timer. What should I do? The timer is stored …

Read More