javascript - jQuery detach() v/s remove() v/s hide()

Question

我在我的页面中使用 highcharts。有点重

当用户单击按钮时，它会动态加载高图，当用户单击close按钮时，它会删除/隐藏图表。

我想知道哪个是更好的选择。

1. 用户点击时隐藏图表？它会减慢页面的其余部分（因为存在大量的 javascript 和处理程序？）或者，

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

3. 使用detach(), 以便在重新加载 highcharts 时，它的工作速度比remove()（但它不会使页面更重，因为 jQuery 处理程序一直存在？）

我从 jQuery 文档中知道，

。消除（）

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

。分离（）

.detach() 方法与 .remove() 方法相同，不同之处在于 .detach() 保留与已删除元素关联的所有 jQuery 数据。当移除的元素稍后要重新插入到 DOM 中时，此方法很有用。

。隐藏（）

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

Answer 1

如果你只是想不时隐藏/显示一个对象，那么使用 jQuery.hide()和.show(). 这是最简单的，只要您要保留对象，您也可以使用.hide()and .show()。除非对象消耗大量内存，否则它应该不是问题。

.remove()（同时保存并稍后在 DOM 中重新插入相同的对象）对您几乎没有用处，因为它会破坏与该对象关联的一些数据，因此您可能无法轻松地将其重新插入页面中。

.remove()您实际上让前一个对象被垃圾收集器销毁，然后在再次需要时从头开始重新创建它是最节省内存的操作，但除非它消耗大量内存或者您有很多内存（例如数千个），在没有任何有意义的好处的情况下，这样做可能只是更多的工作。

.detach()（虽然保存并稍后在 DOM 中重新插入相同的对象）会起作用，但它的工作量比.hide()and更多，.show()而且，老实说，我很怀疑你会发现这两个选项之间的区别。

Answer 2

3 将触发渲染和重绘，因此，如果您关心性能，请使用 .hide()，因为它会“节省”一些 dom 操作（可能还有 2 次重绘）。不要忘记图表上的听众。

但是，我发现 forperformance.addClass('hidden')和.removeClass('hidden'), 使用 css 规则 ( .hidden {display: none}) 效果最好。（只要您不隐藏滚动）。