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

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.