Tworzenie/niszczenie elementów HTML w porównaniu do ukrywania ich, dopóki nie będzie potrzebne, co jest lepsze?

Question

Istnieją dwa sposoby, które chciałbym użyć aby pokazać/ukryć zawartość:

1. tworzenie/zniszczyć elementów, gdy są potrzebne/niepotrzebne za pomocą jQuery.append() i jQuery.remove().
2. Masz już wszystko w html, ale ukryj/wyłącz te elementy, gdy jest to odpowiednie.

Co jest uważane za najlepszą praktykę? Widzę zalety/wady w obu metodach.

Jako przykład mam stronę, na której ludzie mogą robić zdjęcia kamerą internetową. Okno, w którym znajduje się kamera internetowa, wyświetlane jest w osobnym oknie pokrywającym się z całą pozostałą zawartością witryny. Po zrobieniu zdjęcia ponownie nakłada się nakładka kamery. Mogę więc to ukryć lub włożyć/usunąć.

Answer 1

Istnieje podejście pośrednie, które może najlepiej wykorzystać każde z wymienionych podejść. Wspomniałeś o tworzeniu i niszczeniu elementów za pomocą append and remove. Należy wyjaśnić, że tworzenie elementu jest innym zadaniem niż dołączenie go do DOM. tj

tworzenia div

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

jest inna niż załączając Gr:

parent.append(node); 

Więc co można zrobić, to po prostu przypisać elementy do zmiennych (tj cache je na zmienne), a następnie dołącz je i odłącz odpowiednio. W ten sposób nie musisz tworzyć tego samego elementu za każdym razem, gdy chcesz go użyć po jego zniszczeniu (co wiąże się z nadmiarowym kosztem przetwarzania).

W tym samym czasie nie będziesz musiał niepotrzebnie dołączać go do drzewa DOM, a następnie ukrywać (tj. Nie używać go, co spowoduje poniesienie kosztu UI/UX, przez co ogólne wrażenie będzie wolniejsze b/c strony jest załadowany węzłami, z których niektóre nie są w ogóle używane przez użytkownika).

Myślę, że to najlepsze podejście.