Performance Impact of offscreen elements

Question

In a single page app I am doing, some pages become cached and transition towards the bottom of screen, off the viewport.

Those pages stay immediately below the viewport and do not have a property like display:none attached, because hiding them requires a bit more work.

Will this be a performance impact to the app, if there are complex elements off the viewport and not set to display:none?

Answer 1

Yes I believe so. Aspecially if you are creating these elements with javascript. You want to decrease the DOM "interaction" as much as possible. Even If you are not creating these in javascript it's pretty obvious that it will take longer to load your page if there is more data to load. Though data that is created outside the viewport do not matter as much as the data that is created inside the viewport; it is still data being created.