Could manipulating a hidden DOM element have a performance impact?
I have a page with three charts that are displayed via HighCharts. Most users will access this page using a tablet. Charts are "live data" charts, so they are updated with new data every second. Only one chart is currently displayed.
When the charts are hidden (display: none), but their HTML is still refreshed every second, does this affect performance? Will it make a difference if I remove the chart containing the element from the DOM while it is hidden, and then add the element back when the chart is showing? The graph will still update every second when it is removed from the DOM, but it won't actually be part of the DOM.
source to share
When charts are hidden (display: none) but their HTML is still refreshed every second, does this affect performance?
Yes, it does affect performance, even if hidden. For example, $('#fooElement')
inside your script will still go through the DOM trying to find an element. However, when an element is updated while it is hidden, it should not be rendered by the browser, so it is less expensive.
Does it make a difference if I remove the element containing the diagram from the DOM while it is hidden and then add the element back when the diagram is shown?
If you remove it from the DOM, you will have to build it when the user tries to view it. This is IMHO more costly than leaving it in the DOM. Another thing is that you can simply ignore updates until they are shown. When the chart is displayed, just call update and update it in the DOM with new data and show it afterwads. It is, of course, a less costly resource than every time it does its best.
TL; DR Update only the items shown.
source to share