Does visibility affect DOM manipulation performance?

Question

IE7/Windows XP

I have a third party component in my page that does a lot of DOM manipulation to adjust itself each time the browser window is resized.

Unfortunately I have little control of what it does internally and I have optimized everything else (such as callbacks and event handlers) as much as I can. I can't take the component off the flow by setting display:none because it fails measuring itself if I do so.

In general, does setting visibility of the container to invisible during the resize help improve DOM rendering performance?

Answer 1

I'm not certain, but removing it from the active document's DOM then manipulating it does improve performance. After all manipulating is done, attach it back to the document's DOM. Think of it sort of like video buffer swapping.

Answer 2

Caveat: I have not specifically tested this with IE7, but I am reasonably confident based on what I know about its DOM manipulation model.

Changing CSS properties (whether display: none or visibility: hidden or what-have-you) will not affect the performance of DOM manipulation in any version of any browser I've worked with. The primary way to improve the speed of DOM manipulation is to remove the node(s) you will be working with from the document tree, performing your manipulations, and adding them back in. This involves keeping track of their succeeding sibling nodes, if any (for use with insertBefore), which can become complex if you're working with nodes which are scattered around the document.

One technique I have seen when performing a large number of DOM manipulations all at once is to get a list of the body element's children, remove them, perform your manipulations (wherever they fall in the document tree), and then reappend the body's child nodes. Depending on how long your DOM manipulations take (which is itself partially dependent on the speed of your visitor's computer!), this can produce a noticeable flicker. This is why sites manipulating content via AJAX will usually replace any temporarily-removed content with a "spinner" or loading screen.