Visibility:hidden vs. display:none: Which is Better for Performance?

Impact of Hiding Elements Using visibility:hidden vs. display:none

In seeking efficiency measures for your web application, you consider changing the display of your menu and dialog widgets from using display:none with opacity:0 to solely using visibility:hidden. While both methods conceal elements, they differ in their handling within the browser's rendering cycle.

Render Tree and Performance

Elements with display:none are completely removed from the render tree, meaning they are not involved in layout calculations or rendering. This significantly improves browser performance as there is less DOM manipulation and processing required.

In contrast, elements with visibility:hidden remain in the render tree but are simply hidden from view. This means they still occupy space and participate in layout calculations, which can impact performance on complex pages with many hidden elements.

Conclusion

Whether you use display:none or visibility:hidden depends on the specific functionality you require. If the elements need to be completely hidden and are not a factor in layout, display:none is the more efficient option. However, if you need to manipulate the element's visibility without affecting its position or layout, visibility:hidden is appropriate.

The above is the detailed content of Visibility:hidden vs. display:none: Which is Better for Performance?. For more information, please follow other related articles on the PHP Chinese website!