Patching jQuery in order to avoid IE6 & 7 memory leaks ?

Patching jQuery in order to avoid IE6 & 7 memory leaks ?


Hi all,
<exposing_context not_forced_to_read="true">
In a recent project, I coded a table listing pager. This listing
behaves a little like ingrid
http://reconstrukt.com/ingrid/example1.html
In my page, when "next page" button is clicked, an ajax call fetch the
html rows of next page and I just do something like
$("#table tbody").html(html_rows_fetched_from_ajax_call);
When the [edit] button of a row is pushed, I toggle visibility of the
table listing with another div called "form_container". I use $.load()
on this div in order to fetch the form that allow editing of the item
clicked. When editing is finished, I re-toggle the same elements so
you're back in the list.
Nothing complicated as you can see.
Until my customer called me and said that the admin interface was
becoming very slow after spending some time of use. Of course my
customer uses internet explorer and I can't just force him to use
another browser (while I strongly recommended him to use firefox).
So I checked if ingrid had the same issue and it's the case. It eats
up to 500Ko by page switching.
So I was wondering if ExtJS had the same problem. I tried the editable
grid of the extjs demos of extjs and I noticed it didn't had the
problem.
Anyway, I spent some days resolving the issue using quick and dirty
hacks and I would like your advice in order to make thing clean in the
future.
</exposing_context>
It all started when I read this page on Douglas Crockford's website :
http://www.crockford.com/javascript/memory/leak.html
I first quickly jqueryfy his examples and of course it confirmed the issue.
Using $.fn.html() on an element containing nodes with attached events
will cause memory leak under internet explorer.
I know this is an internet explorer bug and my life would be easier if
this horrible browser was sent in another galaxy, anyway, I can't just
ignore this problem. When pages are often reloaded, it not really an
issue because memory will be freed again when page is quit, but my
application stays always in the same page, and all management is made
without page reloading, so after 30 minute of use, the application
becomes completely unresponsive and slow.
While jQueryfying the douglas's examples, I made this quick and dirty function
(function($) {
    $.fn.purge = function() {
        this.each(function() {
            $(this).unbind();
            $(this).find("*").each(function() {
                $(this).purge();
            });
        });
        return this;
    }
})(jQuery);
I was calling this function before using $.fn.html() in order to test
the examples and it work ok. Memory leak was gone.
Of course it's just a test, the function is bad, not optimized and
besides it removes the events of the parent node.
If I remember well, (correct me if I'm wrong) there used to be an
array of attached events in jquery core, and this array was used to
unbind the event when related nodes were removed from the dom (?).
I think this behavior has been removed.
Anyway. I'm sure you're all aware of this problem. The only think I
don't understand is what jQuery core does offer in order to avoid
those memory leaks ?
Is there a hidden option or something that we could activate so jQuery
would NULL all events attached to the childs of an element that is to
be removed when browser is detected as IE6 or IE7 ?
If not, what are we supposed to do ?
Should users patch themselves $.fn.html() , $.fn.remove(),
$.fn.empty() and all the functions that may remove dom elements with
attached events ?
Please, could someone enlighten me about this ?
Note: I don't have a deeper understanding of the problem yet, so if I
said something silly, please be kind ;-)
BTW: sorry for my poor english.
--
Fabien Meghazi
Website: http://www.amigrave.com
Email: agr@amigrave.com
IM: amigrave@gmail.com