Narrowing down JavaScript performance issues on a page using a lot of jQuery calls?

Question

My pages seem to be reacting slow.

There is a lot of JavaScript (jQuery) code on the page. How can I narrow it down? What is taking so long?

Answer 1

The YSlow add-on is the best solution to know why your website is slow.

There are many issues which could be the reason for slowness.

Combining many jQuery to one could help you increasing your performance .

Also you can put the script at the bottom of your page and CSS at top.

Answer 2

If you use Firefox, you can install Firebug and use the profiler.

You can read more about it in Understanding Firebug profiler output , and there is a tutorial in Firebug Tutorial – Logging, Profiling and CommandLine (Part I) .

If you use Internet Explorer, you can use dynaTrace Ajax edition .

Read more about it in A Step-by-Step Guide to dynaTrace Ajax Edition, available today for public download .

There's also a built-in profiler in Google Chrome that you can play around with.

Both these solutions will help you narrow down what JavaScript function calls are the most costly, and with repeated profilings you will be able to see the effect your changes has.

Using tools like these will not only make you a better programmer (if you take the lessons to heart, and avoid the same mistakes they point out in the future), they will also give you a new appreciation of what happens in your code, since you will get a behind-the-scenes glimpse you haven't seen before ;)

Also, if you don't know YSlow , like Wazzy is talking about - get to know it... maybe your problem isn't even slow JavaScript code :)