Possible memory leak after whsihtml5 removal

Question

You can view the simple testing page here

The page contains one textarea, a "create" button and a "remove" button. When the "create" button is clicked, the "textarea" is used to create "wysihtml5". When the "remove" button is clicked, the "wysihtml5" is removed with the code below:

$("iframe.wysihtml5-sandbox, input[name='_wysihtml5_mode']").remove();
$("body").removeClass("wysihtml5-supported");

(Please refer to this for reference.)

The problem I am having is that the memory of the elements(textarea, iframe, and links) created by wysihtml5 seem to be retained in the memory.

I take few heap snap shots with google chrome dev tool.

1. snap1 - when the page is initially loaded
2. snap2 - after the wysihtml5 is created
3. snap3 - after the wysihtml5 is removed

Are there memory leak? If there are, how do I prevent it from happening? (My backbone application can possibly create/destroy 100+ wysihtml5, so a clean removal of wysihtml5 is quite important!)

Answer 1

First of all it is not clear is the test works properly or not because nothing happens with the page when I click create button. It would be much more useful to have a repeatable test.

Nevertheless I did the test and found that the test page (working or not) have no leaks. On the each click it allocates small amount of memory and releases it on the next click.

Sounds like the page creates the detached dom tree on the first creation and keeps it alive. It makes sense to do warm-up create and delete actions before the first snapshot and filter everything except the objects that were allocated between first and second snapshot.

This technique was described here.