jQuery DOM manipulation memory leak in IE

Question

We found a serious memory leak on IE when doing DOM manipulation. Basically, we were doing this:

function updateTable(){
    $.get('table.jsp', {}, function(data){
        $('#dataTableContainer').empty().html($(data).find('#dataTable'));
        setTimeout(updateTable, 1000);
    });
}

and repeating that method once every second. From what we were able to see, that method was leaking around 1Mb of memory every 10 seconds with the jQuery 1.7.1 (it was even worse with older versions).

Are we doing something wrong? We tried several solutions already published in stackoverflow (Ex. jQuery memory leak with DOM removal) but none worked.

I don't think this is the issue but I was under the impression that `$().html()` is the same as `$().empty().append()`. Have you found that to not be the case (or is there another reason you are calling the `.empty()` function)? — Jasper, Jan 12 '12 at 19:12
for some reason i read that as the jquery ui version. i think i need my eyes check! — Patricia, Jan 12 '12 at 19:14
Actually, I know this is the offending line because when I comment it, no memory is leaked. — rreyes1979, Jan 12 '12 at 19:35
Jasper: I removed the empty() call but still leaking memory. — rreyes1979, Jan 12 '12 at 19:40

Ivan Castellanos · Answer 1 · 2012-01-13T23:13:07.733

0

Try this:

function updateTable(){
    $.get('table.jsp', function(data){
        var dt = $(data).find('#dataTable').html()
        $('#dataTableContainer').html(dt);
        setTimeout(updateTable, 1000);
    });
}

The html jQuery method receives a string or a function, NOT a query object like you are doing. The html method replaces the content, so there is no need for using the empty method.

edited Jan 13 '12 at 23:13

answered Jan 13 '12 at 23:07

Ivan Castellanos

8,041
1
47
42

jQuery DOM manipulation memory leak in IE

1 Answers1