Implicações de ocultar elementos com visibilidade versus exibição

Para simplificar um aplicativo da web, o comportamento dos widgets de menu e caixa de diálogo precisa ser modificado. Inicialmente, as caixas div dos menus foram ocultadas usando display: none; opacidade: 0;. Quando um menu era necessário, seu estilo era alterado para display: block; e então posicionado usando o utilitário de posição jQuery UI. Por fim, sua opacidade foi definida como 1.

Uma nova abordagem envolve ocultar caixas div com visibilidade: oculta e torná-las visíveis com visibilidade: visível. Isso levanta uma questão sobre as implicações e o potencial impacto no desempenho dessa mudança.

Implicações de desempenho

Elementos com exibição: nenhum; não estão incluídos na árvore de renderização, tornando-os mais performantes. Por outro lado, elementos com visibilidade: oculto permanecem na árvore de renderização, afetando potencialmente o desempenho se um número significativo estiver oculto em um determinado momento.

Recomendação

Durante a exibição: nenhum; elementos têm melhor desempenho, o impacto do uso de visibilidade: oculto para um número limitado de caixas div ocultas é provavelmente insignificante. Portanto, a escolha entre as duas abordagens deve basear-se na funcionalidade específica necessária. Se for necessário controle de opacidade ou visibilidade, visibilidade: oculto deve ser usado. Caso contrário, exiba: nenhum; é preferido para melhor desempenho.