I have a large page with hundreds of "Tiles", and hovering over each tile reveals a "Flyout". The Flyout will contain more information (and markup) than the Tile.
Since the Flyouts aren't displayed initially, the easiest implementation is to set display: none;
on the Flyouts, and then toggle when the Tile is hovered.
However, I'm concerned about this approach, because it means the DOM will still contain all Flyouts. I've heard, repeatedly, that a large DOM has a significant performance impact on Browsers, especially Mobile Browsers.
So, I've also considered another approach: using JavaScript to detach()
all Flyouts from the DOM (on page load). Then, as Tiles are hovered, the Flyout will be reattached. This presents a higher level of complexity, but page performance is crucial.
To sum up my question:
Is there a performance difference between display: none;
and detach
ed elements?
For example, if the page had an animation, would the large (non-displayed) DOM cause the animation to be more choppy than the slim DOM?