Fast way to dynamically fill table with data from JSON in JavaScript

Question

I am experimenting with jQuery, JSON etc. and came across following task. I have a loader script on the server which returns table data in JSON format. When received the JSO

Answer 1

It's probably faster to build the HTML for the entire row and add the row to the table rather than adding each individual element one at a time. You could also extend that to building all of the HTML in a string, then adding it all at one go, which would be even faster. In an MVC environment, I'd probably return a partial view (HTML) that has the table since that would maintain separation of concerns. I would avoid building HTML on the server (in a controller), though, as that would mean that you'd have to change code whenever you wanted to change how the table was displayed. If you're using PHP or another scripting language, then filter as appropriate for your environment.

var html = '';
for (var key=0, size=data.length; key<size;key++) {

  html += '<tr><td>'
             + data[key][0]
             + '</td><td class="whatever1">'
             + data[key][1]
             + '</td><td class="whatever2">'
             + data[key][2]
             + '</td></tr>';
}

$('#dataTable').append(html);

Answer 2

See my response to an earlier similar query using arrays and "join".

Don't use jQuery at all until the very end, when you call it just once. Also, cut out string concatenation as well by storing the strings in an array and using the "join" method to build the string in one go.

e.g.

 var r = new Array(), j = -1;
 for (var key=0, size=data.length; key<size; key++){
     r[++j] ='<tr><td>';
     r[++j] = data[key][0];
     r[++j] = '</td><td class="whatever1">';
     r[++j] = data[key][1];
     r[++j] = '</td><td class="whatever2">';
     r[++j] = data[key][2];
     r[++j] = '</td></tr>';
 }
 $('#dataTable').html(r.join('')); 

Answer 3

Try deferring the addition of the table to the running DOM until as late as possible.

var table = $('<table>');   // create a new table

// populate the rows
....  .append(table);

// replace the existing table all in one go
$('#dataTable').replaceWith(table);

This should prevent any page layout until the whole table is ready.

If performance is a real problem I'd also avoid calling methods that require parsing strings, like all those $('<td>') calls. For a single element the overhead of that is probably quite expensive (although it's worth it if you have a long string of HTML).

As I understand it, adding large strings of tags using .append() or .html() is supposed to be pretty efficient. What you lose is the control that you would have if you had used .text() to fill the table cells to avoid HTML code injection.