How can I measure the performance of a javascript heavy webpage on a client computer?

Question

How do I measure if my jQuery (or JS) heavy webpage is dragging/ affecting the CPU performance of client computers (and touch devices)? I'm not asking about load times/etc as they are dependant on the number of JS files. I'm asking about client side resource consumption and associated stability issues if any.

To be specific: I'v embedded a jQuery rotate function to perpetually animate an image, and a couple of other jquery based animated objects in the wordpress template.

Answer 1

You can use webkit profiler (profile, audit tab) that comes with web browsers like Google Chrome. Also extensions like page speed and speed tracer are really awesome. You can get an idea on the whole browser process like how much time it spends in UI thread, executing javascript etc.

Answer 2

This is a good question.

You could try Eric's tool that reports the frame rate of the browser.

http://churchm.ag/monitor-javascript-performance/

I'm not sure if this is something that you want to test during development, or monitor has feedback from real clients. It could be possible to run the above Javascript has a background thing and then send AJAX messages back to the server to report the performance for a visitor.

Another script I found attempts to measure CPU performance, but I don't know how good it is.

http://blog.pothoven.net/2007/12/performance-based-web-app-functionality.html

Answer 3

I wouldn't suggest using it on a production server, but Firebug has Javascript performance analysis tools. http://getfirebug.com/javascript

Answer 4

You can use the Google Chrome Web Inspector, specifically the "Profiles" panel. Here's some more information on it...

http://jtaby.com/2012/04/23/modern-web-development-part-1.html#The%20Profiles%20Panel%20