Clash Royale CLAN TAG#URR8PPP

Speed difference between inserting html and changing display style property

Assuming you have a relatively small piece of HTML (let's say under 100 tags and <4KB in size) and you want to occasionally display and hide it from your user (think menu, modal... etc).

Is the fastest approach to hide and show it using css, such as:

//Hide:
document.getElementById('my_element').style.display = 'none';

//Show:
document.getElementById('my_element').style.display = 'block';


Or to insert and remove it:

//Hide
document.getElementById('my_element_container').innerHTML = '';

//Show:
const my_element_html = contents of the element;
document.getElementById('my_element_container').innerHTML = my_element_html;

// Note: insertAdjacentHTML is obviously faster when the container has other elements, but I'm showcasing this using innerHTML to get my point across, not necessarily because it's always the most efficient of the two.


Obviously, this can be benchmarked on a case by case basis, but, with some many browser versions and devices out there, any benchmarks that I'd be able to run in a reasonable amount of time aren't that meaningful.

I've been unable to find any benchmarks related to this subject.

Are there any up to date benchmarks comparing the two approaches? Is there any consensus from browsers developers as to which should, generally speaking, be preferred when it comes to speed.

visibility

1 Answer
1

In principle, DOM manipulation is slower than toggling display property of existing nodes. And I could stop my answer here, as this is technically correct.

display

However, repaint and reflow of the page is typically way slower and both your methods trigger it so you could be looking at:

Which leaves you comparing 101 units with 102 units, instead of comparing 3 with 4 (or 6 with 7). I'm not saying that's the order of magnitude, it really depends on the actual DOM tree of your real page, but chances are it's close to the figures above.

If you use methods like: visibility:hidden or opacity:0, it will be way faster, not to mention opacity is animatable, which, in modern UIs, is preferred.

visibility:hidden

opacity:0

opacity

A few resources:

Web performance, much like web development, is not a "press this button" process. You need to try, fail, learn, try again, fail again...

If your elements are always the same, you might find out (upon testing) caching them inside a variable is much faster than recreating them when your show method is called.

Testing is quite simple:

performance.now()

n

n

Compare. You will notice conclusions drawn from 100 test are quite different than the ones from 1e7 test.

To go even deeper, you can test differences for different methods when showing and for different methods when hiding. You could test rendering elements hidden and toggle their display afterwards. Get creative. Try anything you can think of, even if it seems silly or doesn't make much sense.

That's how you learn.

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.