Javascript benchmarks for adding/removing vs. editing DOM?

Question

Possible Duplicate:
What is better, appending new elements via DOM functions, or appending strings with HTML tags?

I need to change one thousand <div>'s -- just two attributes. Would it be "cheaper" to remove/add the whole <div>, or just change the attributes? And what would be the cheapest way to do this with Javascript (without leaks, and with as little GC as possible).

If I was forced to guess, I'd say it's likely cheaper to just change the attributes - in particular if they're attributes that won't result in visual changes. — Anthony Grist, Jan 17 '13 at 15:58
@AnthonyGrist They will make visual changes. I'll try to benchmark it myself. — knutole, Jan 17 '13 at 16:00
I asked a similar question a while ago: http://stackoverflow.com/questions/8461851/what-is-better-appending-new-elements-via-dom-functions-or-appending-strings-w — Chris Sobolewski, Jan 17 '13 at 16:00
I had answered a question regarding updating many DOM elements with little latency. http://sourcoder.blogspot.ca/2012/12/chunk-processing-array.html you may be interested in checking out the post I did about it afterwards. — rlemon, Jan 17 '13 at 16:02
If you can remove the container of these thousand divs at once, and create all of them at once with a single long string using innerHTML or equivalents, it could be faster. But otherwise, all things equal changing attributes would be faster than removing and adding again. — Mahn, Jan 17 '13 at 16:02
Does 'faster' always mean less CPU btw? Cause efficiency in the way of using little CPU is most important. I asked for _cheaper_, not (necessarily) _faster_. Just to clarify. But I guess normally, they're the same, right? — knutole, Jan 17 '13 at 16:05

score 1 · Accepted Answer · answered Jan 17 '13 at 15:59

Test it in your target browsers, but given that changing attributes wouldn't usually require a reflow (obviously depending on what the attributes are, how they affect how styles are applied, etc., etc.) and doesn't require changing links between DOM nodes, I'd tend to expect changing the attributes to be faster. Replacing the content will require tearing down the old DOM nodes, creating new ones, hooking them into the DOM...

As for how to do it, it depends a bit on how you identify the divs, but it's going to be a simple loop regardless. For example, on any modern browser:

var divs = document.querySelectorAll("selector for the divs");
var index;
var div;
for (index = 0; index < divs.length; ++index) {
    div = divs[index];
    div.setAttribute(/*...*/);
    div.setAttribute(/*...*/);
}

If the attributes are reflected as properties, you may want to use the reflected property instead to avoid the setAttribute function call. For instance, div.id = "value"; rather than div.setAttribute("id", "value");. But I bet that's premature optimization.

Javascript benchmarks for adding/removing vs. editing DOM?

1 Answers1