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.

• AMember: check out PageSpeed: developers.google.com/speed/pagespeed and do what you can from the recommandations
• Mihai Matei: Also.. the idea of having js and css scripts in separately files is that the browser will cache that files and will speed up loading after the first run.. It doesn't matter how many files do you have.. one or many.. the result will be the same

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

Answer 3

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.

• NimChimpsky: phpstorm is specifically for php, jetbrains also do webstorm which looks more appropriate (and a load of others, I use intellij and agree, they make great products)
• Danilo Radenovic: Well, PHPStorm has all the features of WebStorm, plus support for PHP. Here's a description on JetBrain's website - jetbrains.com/phpstorm. It is a couple bucks more expensive than WebStorm, but eventually one might need support for PHP as well.
• Lio: I put CSS file at top and JS files on bottom. I use image sprites also. PHPStorm is the IDE, which I use. Also, I have cached the body tag with jquery: var body = $('body'); body.on('click', 'selector', function(e) { MyFunction(); e.preventDefault(); })
• NimChimpsky: @MikeJohnson The question is about javascript. The less said about php the better, imho.

Answer 4

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