Erstellen/Zerstören von HTML-Elementen gegen Verbergen von ihnen bis zum benötigten, was ist besser?

Question

Es gibt zwei Möglichkeiten, die ich Inhalt anzuzeigen/auszublenden verwenden würde:

1. Elemente erstellen/zerstören bei Bedarf erforderlich/nicht jQuery.append() und jQuery.remove() unter Verwendung.
2. Haben Sie alles bereits in der html, aber verstecken/deaktivieren Sie diese Elemente, wenn es angebracht ist.

Also was gilt als Best Practice? Ich kann Vorteile/Nachteile mit beiden Methoden sehen.

Als Beispiel habe ich eine Website, wo Menschen ein Bild mit ihrer Webcam schießen können. Das Fenster, in dem sich die Webcam befindet, wird in einem separaten Fenster angezeigt, das alle anderen Inhalte der Website überlappt. Wenn ein Bild aufgenommen wird, wird die Webcam-Überlappung wieder entfernt. So kann ich es verstecken oder einfügen/entfernen.

Answer 1

Es gibt eine In-Approach, die das Beste aus jedem der Ansätze nehmen kann, die Sie erwähnten. Sie haben das Erstellen und Zerstören von Elementen mit append und remove erwähnt. Es muss klargestellt werden, dass das Erstellen eines Elements eine andere Aufgabe ist als das Anfügen an das DOM. dh

Schaffung eines div

var node = $('<div>node content</div>); 

anders als ein Div Befestigung:

parent.append(node); 

Also, was Sie tun können, ist einfach Ihre Elemente Variablen zuweisen (dh Cache sie auf Variablen) und dann befestigen Sie sie und trennen Sie sie als geeignet. Auf diese Weise müssen Sie nicht jedes Mal das gleiche Element erstellen, wenn Sie es nach der Zerstörung verwenden wollen (wodurch redundante Verarbeitungskosten entstehen).

Gleichzeitig müssen Sie es nicht unnötigerweise an die DOM-Struktur anhängen und es verstecken (dh es nicht verwenden, wodurch UI/UX-Kosten entstehen, weil das Gesamterlebnis langsamer wird) ist mit Knoten geladen, von denen einige vom Benutzer überhaupt nicht benutzt werden).

Ich denke, das ist der beste Ansatz.