2

I have a div in which I frequently create child divs and later remove them. The insert function looks like this.

var insert = function(container, content) {
    content = $(content);
    container.append(content);
    return content;
};

var newContent = insert($('#container'), '<div>new content</div>');

// later
newContent.remove();

container is a jQuery object. content is a string like <div>new content</div>. Later, that new content is removed.

The div is properly removed from the dom, but using chrome's profiling feature, I can see memory grow and grow. The profile shows a list of strings, thousands of which are my deleted content. Tracking it down, I see that jquery has a property called fragments.

$.fragments is a map where the key strings are html fragments (literally <div>new content</div> is the key string) and the values are DocumentFragment objects.

The DocumentFragment objects contain a property 'native' which contains a value of type 'Detached DOM tree'. And there is my detached object.

It seems like the problem is that jQuery is not flushing this $.fragments collection. I'm using jQuery 1.7.1.

One possible reason I could see for this is that the keys of the map are html that was inserted, but by the time I get around to deleting the fragment, I've changed the newContent div's attributes.

One possible solution is to keep a pool of unused new content divs and re-use them. I don't really want to do that, but it might be reasonable.

3
  • 1
    IF this is true you should probably create an issue for the jQuery team so that it can be addressed. jQuery bug reporting site Feb 13, 2012 at 15:08
  • If you don't want the divs reused, create elements properly by creating the element, then giving it attributes and content. When you do any of these... $('<div>') $('<div/>') $('<div></div>') ...jQuery will use document.createElement(). Creating DOM nodes from HTML strings is an ugly practice IMO.
    – user1106925
    Feb 13, 2012 at 15:22
  • 2
    Why is newContent = $('<div>new content</div>') less proper than newContent = $('<div>').text('new content')? The more complicated 'new content' gets, the less I'm going to want to run through a gauntlet of setting attributes, styles, and content programatically. Feb 13, 2012 at 15:57

1 Answer 1

1

It does look like jQuery is using $.fragments to speed up $("<...>") then.

I suppose using $("<div>").html(...) would not use the cache, but it's obviously semantically different.

You could just try occasionally flushing $.fragments yourself and see what happens. I have the gut feeling everything would go just as expected with no ill effects.

I don't think jQuery really has a way to track the fragment cache usage itself, and an LRU cache or somesuch would probably be slower, not to mention more trouble implementing.

4
  • You got it. I just came up to speed on this. The real problem is that I'm creating a short but unique string of HTML every time and jquery is trying to cache that. I wish I could tell jQuery not to cache it, but I can create the element and fill in the details as a second step. Feb 13, 2012 at 15:34
  • As a workaround, you could force jQuery.support.checkClone or jQuery.support.html5Clone to be false before doing any of this. This'll prevent jQuery from caching the fragments, apparently. See github.com/jquery/jquery/blob/master/src/manipulation.js#L494
    – AKX
    Feb 13, 2012 at 15:40
  • checkClone worked. Thanks. Taking the unique aspects out of the html fragments as I create them and adding them in later also works. I'll have to think about what am not i am said above. Feb 13, 2012 at 15:54
  • I take it back. I had to observe for a longer time period. checkClone + html5Clone did not fix it. The other change did fix it. Feb 13, 2012 at 16:34

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.