jQuery detach()、remove() 和 hide() 的区别

Question

我在网页中使用了highcharts，它有点重。

当用户点击按钮时，动态加载高图表，并且当用户单击“关闭”按钮时，删除/隐藏图表。

我想知道哪个选项更好。

1. 当用户单击时隐藏图表？这会减慢页面余下的部分速度（因为存在大量的JavaScript和处理程序吗？），还是

2. remove()它，使页面变得更轻（但是在这里，当用户再次单击按钮时，我需要重新加载图表），还是

3. 使用detach()，以便在重新加载高级图表时它比remove()更快，（但这不会让页面更重，因为jQuery处理程序一直存在吗？）

从jQuery文档中我知道：

.remove()

.remove()方法将元素从DOM中移除。当你想要删除元素本身以及其中的所有内容时，请使用.remove()。除了元素本身外，所有绑定的事件和与元素相关的jQuery数据也将被删除。

.detach()

.detach()方法与.remove()相同，只是.detach()保留了与已移除元素相关的所有jQuery数据。当要在稍后重新插入已移除元素时，此方法非常有用。

.hide()

匹配的元素将立即隐藏，没有动画效果。这大致相当于调用.css('display', 'none')

- Jashwant

---

在您的情况下，使用detach是因为数据不太重且不值得多次加载。 - Ron van der Heijden

你知道每个东西都是做什么的，这不是一个真正的问题。你需要我们做什么？这取决于你自己。这涉及使用客户端资源还是服务器资源。 - Maksim Vi.

这里的服务器在哪里？我正在使用JavaScript的Highcharts。 - Jashwant

除非您的图表数据不是由客户端生成的，否则我认为它是从某个服务器请求的。 - Maksim Vi.

Answer 1

如果你只是想偶尔隐藏/显示一个对象，那么使用jQuery的.hide()和.show()即可。这是最简单的方法，只要你一直保留该对象，就可以使用.hide()和.show()。除非该对象占用大量内存，否则不应该成为问题。 .remove()（同时保存并稍后重新插入相同的对象）对你来说没有什么用处，因为它会破坏与对象相关联的一些数据，所以你可能无法轻松地将其重新插入页面。 .remove()，其中你实际上让先前的对象被垃圾收集器销毁，然后在需要时从头开始重新创建，是最节省内存的操作，但除非它占用大量内存或你有很多这样的对象（例如数千个），否则这种方式可能只是更多的工作，没有任何有意义的好处。 .detach()（同时保存并稍后重新插入相同的对象）可以工作，但比.hide()和.show()更麻烦，老实说，我不认为你会发现两种选项之间有什么区别。

- jfriend00

---

移除：占用更少内存但需要更多工作。如果不会挂起页面，应使用hide() / detach()。对吗？ - Jashwant

如果您正在处理重复的ID，则可能需要使用detach()或remove()来避免冲突。 - Tim Hallman

Answer 2

当使用3时，会触发渲染和重绘，因此，如果性能是您关心的问题，请使用.hide()，因为它将“节省”一些dom操作（并可能避免2次重绘）。不要忘记在图表上添加监听器。

然而，我发现对于性能来说，使用CSS规则（.hidden {display: none}）的.addClass('hidden')和.removeClass('hidden')效果最好。（只要你不在滚动时隐藏）。

- roselan