jQuery Performance : building DOM elements
This is the third post regarding jQuery performance, it’s not technically jQuery performance, as I am not comparing two different ways of doing something with just jQuery, but more comparing jQuery over native JavaScript methods, mainly showing just because you are using jQuery does not mean you have to use it for everything.
As jQuery is JavaScript, and a very nice way of interacting with the DOM, and handles a lot of the cross browser issues for you, I see a lot of case’s where jQuery is over used and can be a performance issue on an application. Maybe for your average Joe who’s doing some simple bits and bobs to make their site stand out, this may not be an issue. But me being me, I love performance metrics, and testing different ways of doing things. I am always questioning asking: WHY?
The code
If you are working on web applications or something relatively big and generally something that involves an AJAX call to fetch data from a remote source. Chances are you are more than likely going to have to build some DOM elements with the data you have just fetched. Sounds simple enough.
For the purpose of this article we are not hitting any remote services to get our data, but we are building a table for users, that has 4 columns, and 50 rows. We have a name, company, admin, and actions column. Also in this example we are inserting the same data for each row of the table.
You maybe thinking, this is not going to show up much in the way of performance, but hold onto your hat and keep reading!
Example 1 – jQuery
The first example is using all jQuery methods to build all the DOM elements, and add them to variables then append the entire new row to the table.
for ( var i=0; i < rows; i++ ) {
var $newRow = $(‘<tr />’);
var $fRow = $newRow.append($(‘<td />’).text(‘Jim’));
var $sRow = $newRow.append($(‘<td />’).text(‘Testing’));
var $tRow = $newRow.append($(‘<td />’).text(‘No’));
var $foRow = $newRow.append($(‘<td />’).text(‘Delete’));
$table.append($newRow);
}
Exampe 2 – JavaScript Variable with jQuery append
The second example uses one jQuery call to append the HTML string I have built up in a variable using standard HTML markup.
for ( var i=0; i < rows; i++ ) {
row = ‘<tr><td>Jim</td>’
row += ‘<td>Testing</td>’
row += ‘<td>No</td>’
row += ‘<td>Delete</td></tr>’
$table.append(row);
}
The Results
You may or may not be surprised in the results. If you think about it logically, you may realise that the jQuery way is going to be naturally slower, as we are calling jQuery methods to do the work for us, so this has to result in a performance hit naturally as there is another layer to go through than simply building the HTML string(s) in a variable.
The one major thing I got for this (even tho I have always used the HTML way) was the difference in performance over the two methods. I was seeing an average of 75% difference in speed between the two when running the jsPerf test.
On a non-performance matter the HTML way is actually nicer to read (in my eyes).