jQuery best practice points to improve performance of application

1. Always Use the Latest Version

2. Use For Instead of Each

3. Use IDs Instead of Classes

4. Give your Selectors a Context
As stated in jQuery’s documentation,
The DOM node context originally passed to jQuery() (if none was passed then context will be equal to the document).
It should be used in conjunction with the selector to determine the exact query used.
So, if you must use classes to target your elements, at least prevent jQuery from traversing the whole DOM using selectors appropriately.
Instead of $(‘.class’).css (‘color’ ‘#123456’);
always go for contextualized selectors in the form:
$(expression, context) thus yielding $(‘.class’, ‘#class-container’).css (‘color’, ‘#123456’);
which runs much faster, because it doesn’t have to traverse the entire DOM — just the #class-container element.

5. Avoid DOM Manipulation
DOM manipulation should be as limited as possible, since insert operations like prepend(), append(), after() are rather time-consuming.
The above example could be quickened using html() and building the list beforehand.
var list = ”;
for (var i=0; i<1000; i++) {
list += ‘<li>’+i+'</li>’;
}
(‘#list’).html (list);

6. No String concat(); Use join() for Longer Strings
It might appear strange, but this really helps to speed things, especially when dealing with long strings of text that need to be concatenated.
First create an array and fill it with what you have to join together. The join() method will prove much faster than the string concat() function.
var array = [];
for (var i=0; i<=10000; i++) {
array[i] = ‘<li>’+i+'</li>’;
}
$(‘#list’).html (array.join (”));

7. Return False
You may have noticed whenever your functions don’t return false, you jump to the top of the page.
When dealing with longer pages, this result can be quite annoying.
So, instead of
$(‘#item’).click (function () {
// stuff here
});
take the time to write
$(‘#item’).click (function () {
// stuff here
return false;
});

8) Use promises
One way (the bad one) to do the job with jQuery will be:
$.ajax({
url: “/firstAction”,
success: funtion() {
//whatever
secondAction();
return false;
},
error: error()
});

var secondAction = function() {
$.ajax({
url: “/secondAction”,
success: funtion() {
// whatever
},
error: error()
});
};
You should rather use the promises interface implemented by jQuery. So the code above becomes:
$.when($.ajax( { url: “/firstAction” } ))
// do second thing
.then(
// success callback
function( data, textStatus, jqXHR ) {},
// fail callback
function(jqXHR, textStatus, errorThrown) {}
)// do last thing
.then(function() {});
Shorter, more elegant and more readable.

9) Use one time function instead of multiple time.
e.g. (“#Div1”).show();
(“#Div2”).show()
better way => (“#Div1,#Div2”).show()

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s