jQuery detach（）v / s remove（）v / s hide（） [英] jQuery detach() v/s remove() v/s hide()

问题描述

我在我的网页中使用了highcharts。这有点沉重。

当用户点击一个按钮时，它会动态加载高图，当用户点击关闭按钮时，它会删除/隐藏图表。

我想知道哪一个会更好一些。

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

2. remove（）

/ code>它，以便它使页面更轻（但在这里，当用户再次单击按钮时，我需要再次加载图表）或者， >

使用 detach（），以便在重新载入高图时，它的运行速度快于
而不是 remove（）（但不会让页面变得更重，因为jQuery
处理程序一直存在？）




我从jQuery文档知道，





.remove（）




.remove（）方法将元素从DOM中取出。使用.remove（）当
要删除元素本身时，以及
中的所有元素。除了元素本身之外，所有绑定事件和与元素相关的
jQuery数据都将被删除。




.detach（）




.detach（ ）方法与.remove（）相同，不同之处在于.detach（）
保留了与删除元素关联的所有jQuery数据。这个
方法非常有用，它可以在以后将已删除的元素重新插入到
DOM中。




.hide（）




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







解决方案

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





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





.remove（）其中您实际上让前一个对象被垃圾收集器销毁，然后从头重新创建再次需要的是最高效的内存操作，但除非它消耗了大量内存，或者你拥有很多内存（例如数千个内存），否则可能只是通过这种方式进行更多工作而没有任何有意义的好处。





.detach（）（同时保存并稍后将相同的对象重新插入到DOM中）将起作用，但它比 .hide（）和 .show（），而且，我真的很怀疑你会发现这两个选项。




I am using highcharts in my page. It's sort of heavy.

When user clicks on a button, it loads the highcharts dynamically and when user clicks on close button, it removes/hides the chart.

I want to know which one would be a better option.

1. Hiding the chart when user clicks ? Will it slow down the rest of the page (as heavy javascript along with handlers is present ?) or,

2. remove() it, so that it makes the page lighter (But here, when user clicks on button again, I need to load the charts again) or,

3. Use detach() , so that on reloading the highcharts, it works faster than remove() (but wont it make the page heavier as jQuery handlers are present all the time ?)

I know from the jQuery docs,

.remove()

the .remove() method takes elements out of the DOM. Use .remove() when you want to remove the element itself, as well as everything inside it. In addition to the elements themselves, all bound events and jQuery data associated with the elements are removed.

.detach()

The .detach() method is the same as .remove(), except that .detach() keeps all jQuery data associated with the removed elements. This method is useful when removed elements are to be reinserted into the DOM at a later time.

.hide()

The matched elements will be hidden immediately, with no animation. This is roughly equivalent to calling .css('display', 'none')

解决方案

If you just want to hide/show an object from time to time, then use jQuery .hide() and .show(). It's simplest and as long as you were going to keep the object around anyway, you may as well just use .hide() and .show(). Unless the object consumes massive amounts of memory, it shouldn't be an issue.

.remove() (while saving and then reinserting the same object back in the DOM later) will be of little use to you because it destroys some of the data associated with the object so you may not be be able to easily reinsert it in the page.

.remove() where you actually let the previous object gets destroyed by the garbage collector and then you recreate it from scratch when needed again is the most memory efficient operation, but unless it consumes a lot of memory or you have a lot of them (e.g. thousands), it's probably just more work to do it this way without any meaningful benefit.

.detach() (while saving and then reinserting the same object back in the DOM later) will work, but it's more work than .hide() and .show() and, in all honesty, I rather doubt you will find a difference between the two options.

这篇关于jQuery detach（）v / s remove（）v / s hide（）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！