How to optimize javascript/jquery code to speed up it's performance?

Question

On one of my web projects, I use a lot of javascript/jQuery code, which is pretty slow on browsers (Windows 7 x64), especially on IE.

I use 3 Ajax requests at the s

Answer 1

1) minify it

2) all the browsers come with built in debugging tools

3) reduce access to the dom by storing references in variables, don't look up the same element twice

4) separate and use a well known cdn

5) separate just cos its easier to manage

More jQuery tips here : jquery-performance-rules and here : improve-your-jquery-25-excellent-tips.

Make sure all your static resources are cached with no disk lookup

This library is pretty cool

Answer 2

Raw performance may not be your issue. If you notice poor performance on page load, see this article I wrote specifically about minimizing javascript execution on page initialization.

http://blog.lavoie.sl/2013/12/optimizing-page-loads-by-reducing-javascript.html

Answer 3

You can compare selector performance here: http://jsperf.com/

Just setup your HTML code, include jQuery lib and place each selector you want to compare as various test case.

Many of the jquery-performance-rules still apply,

Also have look at here jquery-proven-performance-tips-tricks

Answer 4

Since there are a lot of ways to improve code, especially with such big websites like yours, I think it will be more useful to just post the external links, since these are very nicely written and concise tutorials and tools. Here are some of them:

• Yahoo's tutorial, one of the most complete tutorials I know
• W3Schools' tutorial on using image sprites, especially useful when there are a lot of small images on the page
• Tips on efficient jQuery usage
• Firebug, Firefox plugin for debugging javascript, html, css
• HTML validator, can be very useful to quickly find errors in markup
• HTML compressor for minifying your HTML code (there are a lot of tools on the web for this purpose, it's just a matter of finding the best one)
• CSS compressor, same as for HTML

I would also recommend IDE for building web applications/websites called JetBrains' PHPStorm. It is commercial software, but definitely worth every cent, since it gives hints and tips for improvement while typing.