visibility:hidden vs display:none vs opacity:0

Question

I'm currently starting on an animation project. In the project I'll have more than 40000 divs and animate them iteratively. If any of divs are in passive state (i.e. it's not animating at least for 2 seconds), I won't display them to increase animation performance.

The question is: which css property is the most suitable for this?

.passive1{
   display:none
}

.passive2{
    visibility:hidden;
}

.passive3{
    opacity:0;
}

And how can I measure rendering performance like fps, gpu usage?

Answer 1

They all render the element invisible, yet differ in whether it occupies space and consumes clicks

+--------------------+----------------+-----------------+
| Property           | occupies space | consumes clicks |
+--------------------+----------------+-----------------+
| opacity: 0         |        ✓       |        ✓        |
+--------------------+----------------+-----------------+
| visibility: hidden |        ✓       |        ✗        |
+--------------------+----------------+-----------------+
| display: none      |        ✗       |        ✗        |
+--------------------+----------------+-----------------+

✓: yes
✗: no

And when we say it consumes click, that means it also consumes other pointer events like ondblclick,onmousedown,onmousemove etc.

In essence "visibility: hidden" behaves like a combination of "opacity: 0" and "pointer-events: none".