使用jQuery remove()导致内存泄漏 [英] using jQuery remove() causes memory leak

问题描述

我有一个div，我经常在其中创建子div，然后将其删除.插入函数看起来像这样.

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

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

// later
newContent.remove();

容器是一个jQuery对象. content是类似于>的字符串.稍后，该新内容将被删除.

已将div从dom中正确删除，但是使用chrome的配置文件功能，我可以看到内存在不断增长.该配置文件显示了一个字符串列表，其中数千个是我删除的内容.对其进行跟踪，我发现jquery具有一个称为fragments的属性.

$.fragments是一个映射，其中键字符串是html片段(字面上<div>new content</div>是键字符串)，值是DocumentFragment对象.

DocumentFragment对象包含属性"native"，该属性包含类型为独立DOM树"的值.还有我的分离物.

似乎问题在于jQuery没有刷新此$.fragments集合.我正在使用jQuery 1.7.1.

我可能会看到的一个可能原因是，地图的键是插入的html，但是到删除片段时，我已经更改了newContent div的属性.

一种可能的解决方案是保留一组未使用的新内容div并重新使用它们.我不是真的要这么做，但这可能是合理的.

解决方案

看起来jQuery确实正在使用$.fragments来加快$("<...>")的速度.

我想使用$("<div>").html(...)不会使用缓存，但是在语义上显然有所不同.

您可以偶尔尝试自己冲洗$.fragments，然后看看会发生什么.我有直觉，感觉一切都会按预期进行，而不会产生不良影响.

我认为jQuery本身并没有真正跟踪片段缓存使用情况的方法，LRU缓存或类似方法可能会更慢，更不用说实现起来会遇到更多麻烦.

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.

解决方案

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.

这篇关于使用jQuery remove()导致内存泄漏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！