When is the DOM slow?

[Rakesh Pai]

If I have a page with a large DOM, which of these operations are slow?

1. Updating the DOM of a *visible* area (parent is not display:none)

2. Updating the DOM where the container is invisible with a display:none

3. Updating the DOM of a visible area which is not in the view-port (scrolled out of range)

I guess 2 will be fastest, but what about performance differences between 1 and 3?

Once I have a sizable DOM, does adding/removing nodes to it affect render/reflow performance by a factor that's dependent on the size of the DOM? How is this impacted if large parts of this DOM are display:none? How can I reliably measure this?

Regards,

Rakesh Pai

--
Rakesh Pai
Mumbai, India.
http://piecesofrakesh.blogspot.com/
http://twitter.com/rakesh314
http://www.google.com/profiles/rakeshpai

[sam foster]

I'd guess #2 would be fastest as well. AFAIK the only significance of
#3 vs #2 would be that you are making a change further down the
document, therefore there's less to re-flow. Would be interesting to
know if there's is any out-of-viewport optimization in any of the
browsers though.

As for how to measure it, just take a timestamp before you do the
change, change it and take another afterwards - js and DOM operations
all share the same thread and block one-another so you'll get a
reading that is accurate - as far as any timing with javascript is
accurate: http://ajaxian.com/archives/timing-in-javascript-and-browsers-cant-be-trusted
..Average it over enough samples and you should get your answer.

/Sam