How to improve code performance using jQuery

Hi guys,
In this article i am enlisting some of the very important points which every developer need to consider while working with jQuery to enhance the performance of code . Examples would be generating very long tables with a lot of rows using AJAX to get JSON data. Or iterating through a long (very long) list of data, etc.

  • Use JavaScript native for() loop instead of jQuery’s $.each() helper function.

Native browser functions are always faster than any other helper functions that were built to add an abstraction layer. In case you are looping through an object that you have received as JSON, I highly recommend you rewrite your JSON to contain an array rather than an object.

  • Do NOT append an element to the DOM in your loop.

This one is probably one of the most important tips that will significantly improve your code performance. It is so important that I will repeat myself. Do not append a new element to the DOM in your loop statement. Instead store it in a variable as text and append it to the DOM after your loop finishes like this:

// DO NOT DO THIS
for (var i=0; i<=rows.length; i++)
{
$(‘#myTable’).append(‘<tr><td>’+rows[i]+'</td></tr>’);
}

// INSTEAD DO THIS
var tmp = ”;
for (var i=0; i<=rows.length; i++)
{
tmp += ‘<tr><td>’+rows[i]+'</td></tr>’;
}
$(‘#myTable’).append(tmp);

  •  If you have a lot of elements to be inserted into the DOM, surround them with a parent element for better performance.

When you have a lot of elements to insert into the DOM tree it takes time to add them all. Somehow adding one element with 1000 children is faster than adding 1000 children separately. You can search this site for performance tests that prove it.

So, to improve our previous example’s performance let’s cover <tr>’s with <tbody>tag like this:

var tmp = ‘<tbody>’;

for (var i=0; i<=rows.length; i++)
{
tmp += ‘<tr><td>’+rows[i]+'</td></tr>’;
}
tmp += ‘</tbody>’;
$(‘#myTable’).append(tmp);

  •  Don’t use string concatenation, instead use array’s join() method for a very long strings.

var tmp = [];

tmp[0] = ‘<tbody>’;

for (var i=1; i<=rows.length; i++)
{
tmp[i] = ‘<tr><td>’+rows[i-1]+'</td></tr>’;
}
tmp[tmp.length] = ‘</tbody>’;
$(‘#myTable’).append(tmp.join(”));

  •  Use setTimeout() function for your long list looping and concatenation functions.

This will make sure that page does not freeze while it loops through the long list of data and lets users to work with your page meanwhile.

It was well mentioned in comments that setTimeout() function should be used to split your code processing into little chunks so your browser does not freeze up like this:

function myFunk(data){

// do processing

if(!has_finished)

setTimeout(“myFunk()”, 100);
}

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