jQuery detach() v/s remove() v/s hide() [closed]

Question

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')

Answer 1

the 3 will trigger a render and redraw, hence, if performance is your concern, go for .hide(), as it will "spare" some dom manipulation (and potentially 2 redraw). Don't forget about listeners on your chart too.

However, i found that forperformance .addClass('hidden') and .removeClass('hidden'), with a css rule (.hidden {display: none}) works best. (as long as you are not hidding on scrolling).

Answer 2

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.