The ways to hidden a element and what a best choice

The Problem

We usually are use the following ways to hidden a element:

// 1
display: none;

// 2
visibility: hidden

// 3
opacity: 0

The ways above is work fine but what is the best choice?

The Deep Part

With display: none. We remove the element from DOM. It is bad pattern, because this way make the DOM re-calculate the part of DOM was changed, in a short word: reflow. Beside it will make the layout is lagging because the DOM lost a element.

The rescue come with opacity and visibility. It is just hidden element, not remove from DOM, just repaint. This way will improve the performance and not make the layout change

The Conclusion

I recommend use the opacity or visibility

Comments