The project I’m working involves creating large DOM trees of elements from data, and I’ve been trying to speed things up. Initially I was using jQuery.append(...) combined with document.createElement(...) in something along these lines:

var foo = $(document.createElement("span")).attr("bar", "baz");
$(parent).append(foo);

The reason for this style is because I want to be able to keep around references to the created object so I can use it later and not be forced to use selectors.

While doing some profiling, I became concerned that the append call was taking too much time, so I did some testing. Some articles I’ve read indicated that it was better to do string concatenation to create a massive strings of the elements that you wanted to create and the use a single jQuery.append(...) call to create the elements at the end. I tested that scenario as well.

My test code:

(function() {
	var start = new Date();
	var root = document.createElement("span");
	for(var i = 0; i < 100000; i++) {
		root.appendChild(document.createElement("span"));
	}
	var end = new Date();
	alert("Raw appendChild: " + (end.valueOf() - start.valueOf()));
})();

(function() {
	var start = new Date();
	var root = $(document.createElement("span"));
	for(var i = 0; i < 100000; i++) {
		root.append(document.createElement("span"));
	}
	var end = new Date();
	alert("jQuery append: " + (end.valueOf() - start.valueOf()));
})();

(function() {
	var start = new Date();
	var root = $(document.createElement("span"));
	var inners = "";
	for(var i = 0; i < 100000; i++) {
		inners += "";
	}
	root.append(inners);
	var end = new Date();
	alert("jQuery from string: " + (end.valueOf() - start.valueOf()));
})();

(function() {
    var start = new Date();
    var root = document.createElement("span");
    var inners = "";
    for(var i = 0; i < 100000; i++) {
        inners += "";
    }
    root.innerHTML = inners;
    var end = new Date();
    alert("innerHTML: " + (end.valueOf() - start.valueOf()));
})();

Run Code

The numbers I get are as follows on my Mac in Firefox are as follows (creating 10k span elements).

Raw appendChild: 304 ms
jQuery append: 5492 ms
Concatenated string (jQuery Append): 6040 ms
Concatenated string (raw innerHTML): 208 ms

My results were somewhat inconsistent. Initially when I was running this test I did see jQuery append with the concatenated string to be faster, but when running tests later, it was a bit slower. In general, I think the conclusion of the article is correct. String concatination is better than many calls to jQuery.append(...), but it doesn’t hold a candle to just doing the raw DOM manipulations. This makes sense since jQuery still has to parse the string you give it (it doesn’t feed it raw into the innerHTML) and then call the raw DOM methods directly. Lesson learned.