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 same time only on Home page.

On Search page, I also use ajax requests, which are fired on scroll event, on any 'search tag' (simple anchor tag) click event and etc. which in general is making data loading very slow.

I use jQuery plugins such as, Anythingslider, jquery coockies plugin, Raty (rating plugin), Tipsuy, jQuery coreUISelect, jScrollPane, mouse wheel and etc. All those 3rd party plugins I have minified and combined in jquery.plugins.js file, which is almost 80KB.

I select a lot of DOM elements with jQuery. For example I use the following code:

$("#element")

instead of:

document.getElementById('element');

I also have one big CSS file, which is more than 5 000 lines, because I have combined all 3rd party jQuery plugins's css files into one file, for caching and less HTTP requests.

1. Well, I wonder, what can I do to optimize my code for better performance and speeding up web page load?

2. What kind of tools can I use to debug and my JS code? I forgot to mention that, when I refresh page in Google Chrome or Firefox with firebug or Chrome native developer tools opened, the page in that case loads also very slow. Sometimes the Firefox is even crushed.

3. Will selecting of DOM elements with raw js give me a better and faster way to parse the document? Or should I leave, the jQuery selecting? Talk about is about 50 elements.

4. Should I separate and after that minify external plugins, such as Anythingslider? Or is it better when I have 'all in one' js file?

5. Is it better to also separate jQuery plugins's css code from main style.css? Because even hovering on element and affecting the :hover state from css file, is pretty slow.

Well guys, I'm really counting on you.

I've been googling all night to find answers on my questions and really hope to find it here.

Thanks.

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

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