3

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 detached 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?

Scott Rippey
  • 14,881
  • 5
  • 68
  • 83
  • How much markup will you be creating if you go with option #1? (Number of nodes and kilobytes of HTML.) – Dogbert May 05 '13 at 20:29
  • 1
    And as with all optimization related questions, you'll be best by benchmarking the page on the (low end) mobile devices you want to support. – Dogbert May 05 '13 at 20:31
  • @Dogbert The Flyout will definitely have a significant amount of information -- MORE than the Tiles. – Scott Rippey May 05 '13 at 20:35
  • @icktoofay Yes, I agree. However, the only alternative is to use AJAX to load these contents, and the inherent latency would not be acceptable. – Scott Rippey May 06 '13 at 16:24

1 Answers1

1

In general DOM manipulation is expensive, and you have to consider that when the page loads the DOM is created so when you come to run your script which detaches the flyouts from the DOM you are actually going to just be adding expensive work rather than saving it.

If the flyouts are being displayed with css animations / translations or similar (rather than moving the position of the DOM element - this would be bad) you can piggyback on hardware acceleration and the performance can be great on even lower spec devices.

If you have lots (hundreds seems like a lot) of tiles appearing on a device with a small screen, maybe you should consider only loading a subset and then loading more as required.

Another thought - if you put your flyout markup in script tags they might not actually be attached to the DOM on load. You could then pull them in as needed:

<script type="text/template" id="flyout-markup">
   <div class="flyout">Some info</div>
</script>



var flyoutMarkup = document.getElementById('flyout-markup').innerHTML;

See here for more info : Explanation of <script type = "text/template"> ... </script>

But as been said in the comments - you really need to benchmark these things to make your final decision. Write a blog post about it :)

Community
  • 1
  • 1
Tom Elmore
  • 1,882
  • 14
  • 20
  • Thanks for your answer. It's plausible that the ` – Scott Rippey May 06 '13 at 16:29