Implications of Hiding Elements with Visibility vs. Display

In order to simplify a web application, the behavior of menu and dialog widgets needs to be modified. Initially, the div boxes of menus were hidden using display: none; opacity: 0;. When a menu was needed, its style was changed to display: block; and then positioned using the jQuery UI position utility. Finally, its opacity was set to 1.

A new approach involves hiding div boxes with visibility: hidden and making them visible with visibility: visible. This raises a question about the implications and potential performance impact of this change.

Performance Implications

Elements with display: none; are not included in the render tree, making them more performant. In contrast, elements with visibility: hidden remain in the render tree, potentially affecting performance if a significant number are hidden at any given time.

Recommendation

While display: none; elements perform better, the impact of using visibility: hidden for a limited number of hidden div boxes is likely negligible. Therefore, the choice between the two approaches should be based on the specific functionality required. If opacity or visibility control is needed, visibility: hidden should be used. Otherwise, display: none; is preferred for better performance.