Effect on performance of elements with display:none style attribute

[zoco]

I have a large tabular structure in a page that needs to have column visibility toggled according to what tab of a tabbed control is active.

My solution as I outlined in another thread is to use bitmasks.

I've been asked to consider another approach where the table is duplicated - and each is in a div with display set to none except for the one pertaining to the active tab. So rather than messing around with column visibility on an individual table the display of the containing divs is toggled.

Simpler from a logic point of view but that's going to be a lot of duplicated markup - maintenance issues etc?

My main concern is performance. I know that anything whose display attribute is set to none won't get rendered. But it is still in the DOM - so wont this be bad from a performance perspective?

[Bunk]

I have a large tabular structure in a page that needs to have column visibility toggled according to what tab of a tabbed control is active.

My solution as I outlined in another thread is to use bitmasks.

I've been asked to consider another approach where the table is duplicated - and each is in a div with display set to none except for the one pertaining to the active tab. So rather than messing around with column visibility on an individual table the display of the containing divs is toggled.

Simpler from a logic point of view but that's going to be a lot of duplicated markup - maintenance issues etc?

My main concern is performance. I know that anything whose display attribute is set to none won't get rendered. But it is still in the DOM - so wont this be bad from a performance perspective?

It depends on the number of duplicated tables and the size of them. Does the HTML for each have to be downloaded, or is it dynamically generated from data? Because, obviously, it's going to have an impact on inital page load time if the HTML for all of them needs to be downloaded, although again this depends on the number and size of the tables. I wouldn't be too worried about the DOM performance of hiding and showing a few tables though.

For what it's worth, if it's the same table, just with different combinations of columns displayed each time, that's how I'd represent it in the code, one table, different views of it. Seems simpler to me.

[zoco]

It depends on the number of duplicated tables and the size of them. Does the HTML for each have to be downloaded, or is it dynamically generated from data? Because, obviously, it's going to have an impact on inital page load time if the HTML for all of them needs to be downloaded, although again this depends on the number and size of the tables. I wouldn't be too worried about the DOM performance of hiding and showing a few tables though.

For what it's worth, if it's the same table, just with different combinations of columns displayed each time, that's how I'd represent it in the code, one table, different views of it. Seems simpler to me.

They are created declaratively (this is web forms & dynamic controls & viewstate management can be a nightmare).

[NickFitz]

Most performance issues in browsers nowadays come from rendering. As elements with display: none; don't participate in this, they have negligible effect. The parsing of the HTML into the DOM tree, and its resulting memory usage, shouldn't be a problem unless you do something ludicrous like trying to render thousands of rows or columns, in which case the mere time to load the HTML over the network will be a warning that you're doing it wrong (and also take much, much longer than the parsing).

But it may still be worth trying to get the page size down. Consider lazy loading of the table markup via XHR the first time a given tab is displayed. But a lot depends on actual usage; if users will always look at all tabs, it's better to download the whole thing at the start, whereas if they usually only look at one or two, it's better to keep the initial download small.