创建/销毁HTML元素与隐藏它们直到需要,哪个更好？

Question

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

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

那么什么被认为是最佳实践？我可以看到两种方法的优点/缺点.

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

Answer 1

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

创建一个div

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

与附加div不同:

parent.append(node);

所以你可以做的只是简单地将你的元素分配给变量(即将它们缓存到变量上)然后附加它们并根据需要分离它们.这样,每次在销毁它之后都不需要创建相同的元素(因此会产生冗余的处理成本).

同时,您不必不必要地将它附加到DOM树然后隐藏它(即在不使用它时,因此通过使整体体验更慢而导致UI/UX成本b/c页面加载节点,其中一些根本没有被用户使用).

我认为这是最好的方法.