5 easy tips on how to improve code performance with huge data sets in jQuery

Sitting on jQuery's support mailing list I noticed that developers use jQuery with huge data sets and their code becomes very slow. 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.

So I compiled a list of 5 easy tips on how to improve your code performance while working with huge data sets in jQuery.

1. Use JavaScript native for() loop instead of jQuery's $.each() helper function.
   
   Native browser functions are always faster then 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.
   
   
2. 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);

   
   
3. 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);

   
   
4. 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(''));

   
   
5. And the last but not least 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); 
   }