Implicaciones de ocultar elementos con visibilidad frente a visualización

Para simplificar una aplicación web, el comportamiento de los widgets de menú y diálogo debe ser modificado. Inicialmente, los cuadros div de los menús se ocultaban usando display: none; opacidad: 0;. Cuando se necesitaba un menú, se cambiaba su estilo para mostrar: bloquear; y luego posicionado usando la utilidad de posición jQuery UI. Finalmente, su opacidad se estableció en 1.

Un nuevo enfoque implica ocultar cuadros div con visibilidad: ocultos y hacerlos visibles con visibilidad: visible. Esto plantea una pregunta sobre las implicaciones y el posible impacto en el rendimiento de este cambio.

Implicaciones en el rendimiento

Elementos con visualización: ninguno; no están incluidos en el árbol de renderizado, lo que los hace más eficaces. Por el contrario, los elementos con visibilidad: oculto permanecen en el árbol de renderizado, lo que puede afectar el rendimiento si un número significativo está oculto en un momento dado.

Recomendación

Mientras se muestra: ninguno; Los elementos funcionan mejor, el impacto del uso de visibilidad: oculto para un número limitado de cuadros div ocultos probablemente sea insignificante. Por lo tanto, la elección entre los dos enfoques debe basarse en la funcionalidad específica requerida. Si se necesita control de opacidad o visibilidad, se debe utilizar visibilidad: oculta. De lo contrario, muestre: ninguno; se prefiere para un mejor rendimiento.