
Do jQueryUI widgets cause memory leaks?
We performed a small test to check whether jQueryUI widgets increase the memory footprint after the DOM element is removed
My colleague, Maayan Noy, has taken upon herself to search for memory leaks in our web-based Designer, a very challenging and non trivial task. One of the suspects was a panel of widgets that allows for styling of UI controls, specifically the jQueryUI-based widgets that we developed in-house.

The styling panel is dynamic — it renders differently for each control type the user chooses to stylize. Every time a styling is performed, the internal DOM of the panel is removed and renders from scratch. We noticed that after a few times of re-rendering of the panel, the browser memory consumption increased, indicating a possible memory leak in the panel.
Some of the UI controls in the panel are based on jQueryUI home-grown widgets, and we assumed these might cause a memory leak since the destroy() method of the widgets was not properly called when the panel is removed from the DOM. To validate this assumption we performed a little experiment to test whether the jQueryUI widgets would cause a memory leak when the corresponding elements were removed from the DOM without calling the destroy().
The Experiment
We created an empty html that loads jQuery (version 3.2.1) and jQueryUI (version 1.12.1) into it. We added 10,000 empty div elements and took a snapshot of the memory heap using chrome dev-tools.

Next, we created 10,000 button widgets simply by selecting all the div elements in the page and calling the button widget constructor. We even added a click listener to add a more realistic use of the widget.
$("div").button().click(e => console.log("clicked"))
We took another memory snapshot which was obviously much higher. The interesting question was to see what happens to the memory consumption after the removal of all the div elements.
We also wanted to see if calling the destory() method before the removal of the DOM elements reduces the memory consumption.
Results
After adding 10,000 div elements, the heap size was 7.7MB. Creating from these elements 10,000 button widgets increased the heap size to 65MB. Removing all the elements without calling the destroy() of the widgets reduced the heap size to 9.3MB. Calling the destory() for all the widgets and then removing the elements from the DOM reduced the heap size from 65MB again, to 9.3MB.

Conclusion
We set out to check if removing jQuery UI Widgets directly from the DOM without calling the destroy() method would leave a bigger memory footprint than with calling the destroy() method and only then to remove it. As shown above, we conclude that wether calling the destroy() or not has no impact on the memory consumption vs. simply removing the DOM element.
We also noticed that the total memory consumption before adding the widgets and after removing them was not equal. One might wonder what would happen if we had repeated the process of adding and removing jQuery UI widgets.
The Experiment (cont.)
Although this is a different question, the results are not as expected. We tried to repeat the process several times (of adding 10,000 div elements, creating button widgets from these, and then remove from the DOM), and it seems the memory consumption is rising:

It is not likely that this is the main cause of the systematic increase of memory consumption in our Designer because the increase seems negligible for 10,000 items whereas we are using a significantly smaller amount of instances. Nevertheless, know that when you are using jQueryUI widgets it might have implication on your memory consumption over time.
