jquery - 创建/销毁 HTML 元素与在需要时隐藏它们哪个更好？

Question

我会使用两种方式来显示/隐藏内容:

1. 使用 jQuery.append() 和 jQuery.remove() 在需要/不需要时创建/销毁元素。
2. 将所有内容都包含在 html 中，但在适当的时候隐藏/禁用这些元素。

那么什么才是最佳实践？我可以看到这两种方法的优点/缺点。

例如，我有一个网站，人们可以在其中使用网络摄像头拍摄照片。网络摄像头所在的窗口显示在一个单独的窗口中，与站点的所有其他内容重叠。拍摄照片时，网络摄像头重叠将再次移除。所以我可以隐藏它或插入/删除它。

Answer 1

有一种介于两者之间的方法可以充分利用您提到的每一种方法。您提到使用附加和删除创建和销毁元素。必须明确的是，创建元素与将元素附加到 DOM 是不同的任务。即

创建一个 div

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

不同于附加一个div:

parent.append(node);

所以您可以做的就是简单地将您的元素分配给变量(即缓存它们到变量上)，然后根据需要附加和分离它们。这样你就不必在销毁它后每次想要使用它时都创建相同的元素(从而产生冗余的处理成本)。

与此同时，您不必将它不必要地附加到 DOM 树然后隐藏它(即在不使用它时，通过使整体体验变慢来招致 UI/UX 成本 b/c 页面是加载了节点，其中一些根本不被用户使用)。

我认为这是最好的方法。