Mar 21 2012

HI I’m Chris and I’ve been living under a rock because I just barely learned about using the console.profile() function in conjunction with FireBug. Better late than never. I was trying to figure out why appending data to an HTML table with jQuery was so damn time consuming. A quick google search yielded the awesome Console API functions provided by FireBug.

This leads me to my next point, calling a the jQuery append() method in a loop is bad in terms of execution time. This is probably something I should’ve figured out a long time ago, but I haven’t dealt much with client side optimization (most of my experience is server-side optimizations).

Before Optimization:

console.profile('Build table');
for(var i=0; i<o.NavigationItem.length; i++){
    $('#Data').append('<tr><td><a href="javascript:getPartCategory('+id+','+aaia+','+o.NavigationItem[i].ServerItemID+',\''+o.NavigationItem[i].Text+'\')">'+o.NavigationItem[i].Text+'</a></td></tr>');
}
console.profileEnd();

After Optimization:

console.profile('Build table');
var tableStr = '';
for(var i=0; i<o.NavigationItem.length; i++){
    tableStr+= '<tr><td><a href="javascript:getPartCategory('+id+','+aaia+','+o.NavigationItem[i].ServerItemID+',\''+o.NavigationItem[i].Text+'\')">'+o.NavigationItem[i].Text+'</a></td></tr>';
}
$('#Data').append(tableStr);
console.profileEnd();

The big news to me here is the .append() method is slow when compared to appending data to a string and then making a single call to .append(). I am not sure what the trade off here is when you bring memory consumption into the discussion though. This didn’t turn out to be the core reason why this took so long (as you can see we are dealing in milliseconds here) but it was still a neat discovery.

Chris Nizzardini

Chris Nizzardini has been developing web applications since 2006. He lives and works in beautiful Salt Lake City, Utah. If you’re interested in hiring me for contract work please visit IO Spring LLC.

  

console, firebug, firefox, javascript, optimization, profiler

Using Google Analytics Custom Variables for AB Testing Enhanced PHP performance profiling with Xhprof