One of the gifts in the swag bag from JSConf this year was a free copy of JSMag, a definite start to quality reading on topics related to JavaScript. I was reading a solid article by Rebecca Murphey (@rmurphey) on “Using Object Lilterals to Organize Your Features” and noticed something in the code that inspired me to do a quick little test on performance.
In her code, she has an object method defined in the following manner:
myFeature.$section_nav = $('ul/>').attr('id','section_nav').prependTo(myfeature.$container);
Absolutely nothing wrong with this code and it reads well and works fine. However, it is slightly different than the way I write my code when I’m dynamically creating and appending elements to the DOM. Typically, instead of creating an element and passing it to the jQuery method, I find the element I want to append the element to and then simply call the append method passing in a block of HTML. Again, nothing fancy, but the key difference I picked up on was that when I pass a block of HTML, I include all attributes in the element(s) I’m passing in. So essentially I would have:
$('#header').append("<p class="orange" id="headerText"/>");
So even though this may be just a coding style, I was curious to see what the difference would be in performance based on passing a block of HTML first, adding attributes to it via the attr() method and then appending (or prepending) to an element, or the way I do it, which is a bit of the reverse.
I created a very simple test with the following markup:
<div id="main"> <form action=""> <input type="button" value="No Attribute Method Call" id="noAttr" /> <input type="button" value="With Attribute Method Call" id="withAttr" /> <input type="button" value="Clear Response Div" id="clear" /> </form> <div id="response"> </div> </div>
And the subsequent JavaScript:
$(function(){
var $response = $('#response');
$('#noAttr').click(function(){
$response.append('<p id="myParagraph"/>');
$('#myParagraph').text('Some Text');
return false;
});
$('#withAttr').click(function(){
$('<p/>').attr('id', 'myParagraph').appendTo($response);
$('#myParagraph').text('Some Text');
return false;
});
$('#clear').click(function(){
var children = $response.children();
$.each(children, function(i){
delete children[i].parentNode.removeChild(children[i]);
});
return false;
});
});
The results are interesting…
Test With Attribute Method
The above screenshot shows the results in Firebug’s profiler of the technique used that is similar to Rebecca’s example. Note, the total number of calls and the total amount of time it takes to execute the function on the click event.
Test Without Attribute Method
And these are the results using the technique of which I am most accustomed.
The obvious numbers that stand out to me are the total number of calls and the total amount of execution time. 90 total function calls in the first example versus only 62 in the second and a difference of 0.811 milliseconds in total execution time. Now, many may argue that .811 milliseconds is not that significant of a difference on the surface, but the percentage difference is…a whopping 37.5%!
Try it out for yourself on the demo page (requires a standards-compliant browser and a JavaScript profiler).
Tags: firebug, JavaScript, jQuery, performance, test
