jQuery Code Optimization

Question

Background

I have developed a jQuery based application this application generate ajax calls to server and fetch information in JSON format and draw DIV's and generate HTML structure on the bases of received information.

Detail

I used some animation effects in this application to display JSON data
JSON data may contains maximum 1000 record at a time (Size < 1MB)
each record show on web page in summary view and when user client on the record then this DIV expand using jQuery.animation() and load it detail
information Summary contain only 1 line and Detail information contain about 4 or 5 lines
It have drag and drop feature
It change the HTML on (Horizantal/Vertical) scroll move
It load all data (Summary and Detail) at the same time

Actual Problem

On the bases of client requirement now I am adding some more features in this custom application. Problem is this, now my browser is getting slow and some times its being held. How I can improve the performance of my code.

My Browser is getting Slow
Animation not working properly. Its missing the animation frames

I cannot modified my whole code. Because its very lengthy and have a lot of feature. I have developed this application about in 6months period. So it will be hectic job for me to change the all piece of code.

What will be the best approach to optimize jQuery application code.

Solution I found

I found the few solution over the internet to optimize the jQuery code.. - like mostly try to use the id Selector or TAG Selector - avoid from the element traversing - .... blah blah

After implementing these techniques. My code performance it getting reduced and even now my system is also getting held

What I want

Is there any tools available that can identify the code lines. that may cause of slowness.
Is there any tools available that will optimize my code
any other method you will recommend ... ?

I am using firebug for the front-end development but there is not such kind of option to solve this issue

Extra Information

System I am using for the development

4 GB RAM
Google Chrome and Mozilla Firefox
FireBug

Try Page Insights : https://developers.google.com/speed/pagespeed/insights/ — Ankit Tyagi, Mar 21 '14 at 05:56
Or simply install : https://chrome.google.com/webstore/detail/pagespeed-insights-by-goo/gplegfbjlmmehdoakndmohflojccocli?hl=en — Ankit Tyagi, Mar 21 '14 at 05:57

score 1 · Answer 1 · edited May 23 '17 at 12:28

Benchmark your JS functions, using something like JSLitmus, and by doing this you can make adjustments and fine tune your code for optimal performance.

Also for jQuery selectors that are commonly used, store as a variable and reference that so that jQuery only has to process the selector code once, eg:

var elem = $(this);
elem.addClass('woo');
var href = elem.attr('href');

I also recommend reading this page for some useful information about animation timing intervals with jQuery. Hope this helps!

jQuery Code Optimization

1 Answers1