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

Question

How can I measure if a heavy jQuery (or JS) webpage is dragging / dropping processor performance on client computers (and touch devices)? I do not ask about boot times / etc, as they depend on the number of JS files. I ask about the consumption of client side resources and related stability issues, if any.

To be specific: I'v built in a jQuery rotation function to continuously animate an image and several other jquery-based animated objects in a wordpress template.

Answer 1

You can use the webkit profiler (profile, audit), which comes with web browsers such as Google Chrome. Also, extensions like page speed and trace speed are really amazing. You can get an idea of ​​the entire browser process, for example, how much time it spends in the user interface thread, executing javascript, etc.

Answer 2

This is a good question.

You can try the Eric tool, which reports the frame rate of the browser.

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

I'm not sure if this is what you want to test during development, or the monitor has feedback from real customers. Perhaps you can run the aforementioned Javascript and then send AJAX messages to the server to report performance to the visitor.

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

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

Answer 3

I would not 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, in particular the Profiles panel. Here is more information about this ...

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