Tạo/hủy các phần tử HTML so với ẩn chúng cho đến khi cần thiết, tốt hơn là gì?

Question

Có hai cách mà tôi sẽ sử dụng để hiển thị nội dung/hide:

1. Tạo/phá hủy các yếu tố khi cần thiết/không cần thiết bằng cách sử dụng jQuery.append() và jQuery.remove().
2. Có mọi thứ đã có trong html nhưng ẩn/tắt các phần tử đó khi thích hợp.

Vì vậy, thực tiễn tốt nhất được coi là gì? Tôi có thể thấy ưu điểm/nhược điểm với cả hai phương pháp.

Ví dụ: Tôi có một trang web nơi mọi người có thể chụp ảnh bằng webcam của họ. Cửa sổ trong đó webcam cư trú được hiển thị trong một cửa sổ riêng biệt chồng lấp tất cả nội dung khác của trang web. Khi ảnh được chụp, chồng chéo webcam sẽ bị xóa lần nữa. Vì vậy, tôi có thể ẩn nó hoặc chèn/loại bỏ nó.

Answer 1

Có một cách tiếp cận giữa có thể tận dụng tối đa từng phương pháp bạn đã đề cập. Bạn đã đề cập việc tạo và hủy các phần tử bằng cách nối và xóa. Nó phải được làm rõ rằng việc tạo ra một phần tử là một nhiệm vụ khác với việc gắn nó vào DOM. tức là

tạo một div

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

khác với gắn một div:

parent.append(node); 

Vì vậy, những gì bạn có thể làm chỉ đơn giản là gán các yếu tố của bạn để biến (ví dụ bộ nhớ cache chúng vào các biến) và sau đó đính kèm chúng và tách chúng ra khi thích hợp. Bằng cách này bạn không phải tạo cùng một phần tử mỗi khi bạn muốn sử dụng nó sau khi đã phá hủy nó (do đó phát sinh chi phí xử lý dự phòng).

Đồng thời, bạn sẽ không phải đính kèm nó vào cây DOM một cách không cần thiết, sau đó ẩn nó (tức là trong khi không sử dụng nó, do đó phát sinh chi phí UI/UX bằng cách làm cho trải nghiệm tổng thể chậm hơn b/c trang được nạp với các nút, một số trong đó không được sử dụng ở tất cả bởi người dùng).

Tôi nghĩ đó là cách tiếp cận tốt nhất.