Implications du masquage d'éléments avec visibilité par rapport à l'affichage

Afin de simplifier une application Web, le comportement des widgets de menu et de boîte de dialogue doit être modifié. Initialement, les boîtes div des menus étaient masquées à l'aide de display: none; opacité : 0 ;. Lorsqu'un menu était nécessaire, son style était modifié pour afficher : block ; puis positionné à l'aide de l'utilitaire de position jQuery UI. Finalement, son opacité a été fixée à 1.

Une nouvelle approche consiste à masquer les boîtes div avec visibilité : caché et à les rendre visibles avec visibilité : visible. Cela soulève une question sur les implications et l'impact potentiel de ce changement sur les performances.

Implications sur les performances

Éléments avec affichage : aucun ; ne sont pas inclus dans l'arbre de rendu, ce qui les rend plus performants. En revanche, les éléments avec visibilité : masqué restent dans l'arbre de rendu, ce qui peut affecter les performances si un nombre important d'entre eux sont masqués à un moment donné.

Recommandation

Pendant l'affichage : aucun; Les éléments fonctionnent mieux, l'impact de l'utilisation de visibilité : caché pour un nombre limité de boîtes div cachées est probablement négligeable. Le choix entre les deux approches doit donc être basé sur les fonctionnalités spécifiques requises. Si un contrôle d’opacité ou de visibilité est nécessaire, visibilité: caché doit être utilisé. Sinon, affichez : aucun ; est préféré pour de meilleures performances.