DEV Community

loading...

A quick note on performance:

danbamikiya profile image Dan Bamikiya ・2 min read

We use display: none instead of opacity: 0 to hide elements/ implementation details.
But opacity is a better choice for performance because it is one of the things the browser can use the GPU to animate, a process known as hardware acceleration.
Using the GPU leads to smoother animation as the browser does not have to re-paint the areas of the screen that are animating. Instead, the browser paints the elements to be animated to "layers" that are uploaded to the GPU, which it can then animate.
Note that the browser doesn't always create new layers for the GPU when you want it to, so you can force it to do so by setting certain properties like backface-visibility (old) or will-change.

Examples where you might use will-change:

  • Where you have an element whose transform property is used to animate or add some sort of effect adding will-change: transform tells the browser this property of the element will change in the near future then the browser can choose to apply any ahead-of-time optimizations required for the property change before the property change actually happens.
  • will-change: opacity
  • will-change: scroll-position
  • will-change: contents (something about the element’s contents will change in the near future).

Having said these there are few caveats to using will-change:

  1. The browser already tries as hard as it can to optimize everything so do not apply will-change to too many elements.
  2. Will-change is intended to be used as something of a last resort, in order to try to deal with existing performance problems. Don't apply will-change to elements to perform premature optimization. :)

With this relatively short post I hope I've been able to add to your wealth of knowledge! :)

To know more about the will-change property visit MDN

Discussion (3)

pic
Editor guide
Collapse
afif profile image
Temani Afif • Edited

But opacity is a better choice --> but opacity:0 and display:none will lead to different results so we cannot really compare between both

Collapse
danbamikiya profile image
Dan Bamikiya Author

It's nice you read the post Termani. Visibly opacity: 0 and display: none lead to the same results. In rendered content and accessibility tree, different results.
The subject of this post is on performance so opacity, display, visibility and hidden attribute can all be compared in terms of performance.

When the need for performance is priority there are other ways to achieve the behaviour display: none gives.
For example:

  1. If the idea is to hide an element visually for an animation, opacity can be used together with transform ( or just transform alone depends on what you want to achieve )
  2. clip-path: inset(100%); with clip: rect(0 0 0 0); and overflow: hidden; can be used. To even support screen readers add white-space: nowrap;
Collapse
afif profile image
Temani Afif

You should probably make the article more focused on animation and in such case we cannot use display because it's not animatable so even for animation it's difficult to apply the comparaison.
I still disagree that both opacity:0 and display:none gives the same result. Even if you combine opacity with transform, the element will remain in flow and will still contribute to the layout while it's not the case when using display:none (the element is no more considered in the layout so the browser need to re-render the layout thus it's more expensive than opacity)
opacity and display may lead to the same visual result if and only if the element is out of the flow (position:absolute or position:fixed) and we disable the mouse interaction (using pointer-events:none because we can interact with an element having opacity:0). In such situation we can compare both but in a normal flow we cannot.

I understand the performance comparaison but it's like comparing the performance of a Car with a Plane. It's clear the the Plane is faster than a Car but both aren't used for the same purpose