Auswirkungen des Ausblendens von Elementen mit Sichtbarkeit vs. Anzeige

Um eine Webanwendung zu vereinfachen, muss das Verhalten von Menü- und Dialog-Widgets angepasst werden geändert werden. Ursprünglich wurden die Div-Boxen von Menüs mit display: none; Deckkraft: 0;. Wenn ein Menü benötigt wurde, wurde sein Stil in display: block; und dann mit dem Positionsdienstprogramm der jQuery-Benutzeroberfläche positioniert. Schließlich wurde die Deckkraft auf 1 gesetzt.

Ein neuer Ansatz besteht darin, Div-Boxen mit Visibility: Hidden auszublenden und sie mit Visibility: Visible sichtbar zu machen. Dies wirft eine Frage zu den Auswirkungen und möglichen Auswirkungen dieser Änderung auf die Leistung auf.

Auswirkungen auf die Leistung

Elemente mit Anzeige: keine; sind nicht im Renderbaum enthalten, wodurch sie leistungsfähiger sind. Im Gegensatz dazu bleiben Elemente mit „visibility: hide“ im Renderbaum erhalten, was möglicherweise die Leistung beeinträchtigt, wenn zu einem bestimmten Zeitpunkt eine erhebliche Anzahl ausgeblendet ist.

Empfehlung

Während der Anzeige: keiner; Elemente eine bessere Leistung erbringen, ist die Auswirkung der Verwendung von „visibility:hidden“ für eine begrenzte Anzahl versteckter Div-Boxen wahrscheinlich vernachlässigbar. Daher sollte die Wahl zwischen den beiden Ansätzen auf der spezifischen erforderlichen Funktionalität basieren. Wenn eine Steuerung der Deckkraft oder Sichtbarkeit erforderlich ist, sollte „visibility:hidden“ verwendet werden. Andernfalls wird Folgendes angezeigt: none; wird für eine bessere Leistung bevorzugt.