Does manipulating a hidden DOM element affect performance?

Question

I have a page with 3 charts that are rendered via HighCharts. Most users will access this page via a tablet. The charts are all "live data" charts, so they update every second with new data. At a given time, only one chart is visible.

When the charts are hidden (display:none), but their HTML is still being updated every second, does that affect performance? Would it make a difference if I removed the chart's containing element from the DOM while it's hidden, and then appended the element back in when showing the chart again? The chart would still be updated every second when it was removed from the DOM, but it wouldn't actually be a part of the DOM.

Answer 1

When the charts are hidden (display:none), but their HTML is still being updated every second, does that affect performance?

Yes, it affects the performance even if it's hidden. For example $('#fooElement') inside your script would still go through the DOM trying to find the element. However when the element is updated while hidden it doesn't have to be rendered by the browser, so it's less costly.

Would it make a difference if I removed the chart's containing element from the DOM while it's hidden, and then appended the element back in when showing the chart again?

If you remove it from the DOM you would have to construct it when the user tries to view it. This is IMHO more costly than to leave it in the DOM. Another thing is that you can just ignore the updates until it's shown. When the chart is about to be displayed just call for a refresh and update it in the DOM with new data and show it afterwads. This is of course less resource costly than to do the same plus constructing it every time.

TL;DR Update only elements which are shown.