Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Which is better: string html generation or jquery DOM element creation?

Ok, I'm rewriting some vanilla JS functions in my current project, and I'm at a point where there's a lot of HTML being generated for tooltips etc.

My question is, is it better/preferred to do this:

var html = '<div><span>Some More Stuff</span></div>';
if (someCondition) {
    html += '<div>Some Conditional Content</div>';
}
$('#parent').append(html);

OR

var html = $('<div/>').append($('<span/>').append('Some More Stuff'));
if (someCondition) {
    html.append($('<div/>').append('Some conditionalContent');
}
$('#parent').append(html);

?

like image 416
Ed James Avatar asked Apr 22 '10 11:04

Ed James


People also ask

What is the most efficient way to create HTML elements using jQuery?

Conclusion: The $(document. createElement('div')); is the fastest method, even the benchmarking supports, this is the fastest technique to create an HTML element using jQuery.

Is jQuery better than DOM?

Pure JavaScript can be faster for DOM selection/manipulation than jQuery as JavaScript is directly processed by the browser. jQuery has to be converted into JavaScript to make it run in a browser. All these can be done in JavaScript but we may have to write many lines of code.

Is jQuery faster than DOM?

As opposed to jQuery, React makes use of a Virtual DOM. The use of a virtual DOM speeds up the DOM update process. This makes React substantially faster than jQuery.


1 Answers

From a performance standpoint: it depends.

In your short example, it's faster to append the text, since you actually aren't creating any DOM elements until the end. However if you were doing this a lot, then the added time of string concatenation vs the performance of cached document fragments adds up.

When you do $(html) jQuery caches it as a document fragment (provided the string is 512 bytes or less), though there's not much gain if you're caching just $("<div />")...however if you're doing it thousands of times, there is a measurable impact, as string concatenation gets more expensive as your string gets longer, the cached document fragment cost is pretty steady.

Update: Here's some quick examples to see what I mean, use firebug to get the console times here:

You can run this for yourself: http://jsfiddle.net/Ps5ja/

console.time('concat');
var html = "";
for(var i = 0; i < 500; i++) {
    html += '<div><span>Some More Stuff</span></div>';
    html += '<div>Some Conditional Content</div>';
}
var elem = $(html);
console.timeEnd('concat'); //25ms

console.time('DOM');
var parent = $("<div />")
for(var j = 0; j < 500; j++) {
    parent.append($('<div/>').append($('<span/>', {text :'Some More Stuff'})));
    parent.append($('<div/>',{ text: 'Some conditionalContent' }));
}
console.timeEnd('DOM'); //149ms

console.time('concat caching');
var html = "";
for(var i = 0; i < 5000; i++)
    html += '<div><span>Some More Stuff</span></div><div>Some Conditional Content</div>';
var elem = $(html);
console.timeEnd('concat caching'); //282ms

console.time('DOM caching');
var parent = $("<div />")
for(var j = 0; j < 5000; j++)
    parent.append('<div><span>Some More Stuff</span></div><div>Some Conditional Content</div>');
console.timeEnd('DOM caching'); //157ms

Note: the var elem = $(html); in the string test is so we end up creating the same DOM elements, otherwise you're comparing string concatenation to actual DOM creation, hardly a fair comparison, and not really useful either :)

You can see by the above, as the cached fragment is more complex, the more caching makes an impact. In the first test, which is your example without the condition cleaned up a bit, DOM loses because there are lots of little operations going on, in this test (on my machine, but your ratios should be about the same): HTML Contact: 25ms, DOM Manipulation: 149ms.

However, if you can cache the complex fragment, you get the benefit of not creating those DOM elements repeatedly, just cloning them. In the second test DOM wins out, because while the HTML method creates that DOM element collection 5000 times, the second cached method only creates it once, and clones it 5000 times. In this test: HTML Concat: 282ms, DOM Manipulation: 157ms.

I realize this isn't directly in response to your question, but based on comments it seems there's some curiosity about performance, so just giving something you can see/test/play with.

like image 192
Nick Craver Avatar answered Nov 03 '22 09:11

Nick Craver