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

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.

Answer 2

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 3

I've just tested this using a button-dialog situation I'm having. Basically, I copied one long dialog many times until I have a 10000-line file.

html:

<div class="no-visible dialog">
    ....
</div>

css:

.no-visible {
    visibility: hidden;
    animation:....
    ....
}

Conslusion:

It slowed down the computer a lot with all the JS and CSS, and all my css animations were gone. Especially when a button is clicked and JS have to find to corresponding dialog to display, it lagged.

Solution:

Put the dialogs in another html (dialogs.html) and load the necessory when needed.