How likely are memory leaks with jQuery?

Imagine, I build a complex interface using jQuery/AJAX and want the application with this interface to be open during all day long. It deals heavily with AJAX, builds its elements, removes others, changes positions and开发者_如何学运维 sizes etc. How likely are memory leaks or browser lags with this scenario? How do I better deal with data and code to avoid overuse of memory? Are there any issues from the browser side I can face?

jQuery itself does a fairly good job at cleaning up after itself for items bound in events, etc. However, it's still easy to leak events, etc by destroying objects outside of jQuery. For instance:

$('#someDiv a').bind('click', function(){ ... });
$('#someDiv').html('foo');

the above code wipes out the links that were in the div, but since jQuery doesn't know it it doesn't release the function from its internal data store of events and the function leaks.

You can also easily leak with any of the existing leak patterns, of which there are many: circular references, etc. Many of which are caused by closures.

google "javascript leak patterns" for info.

You can deal with overuse of memory by simply not creating more objects than you need to accomplish your tasks.

However, jQuery should not be subject to memory leaks unless there's a but in the browser.

This will be browser dependent. jQuery doesn't introduce any memory leaks that I'm aware of, but I know that in some browsers closures can cause leaks. What I mean is that you should worry about memory leaks, but probably not from jQuery.

Preventing memory leaks can be very difficult, especially when the application is running on a variable environment. Run your application on different browsers for long periods, and track memory usage for each - in this way you can establish how much memory is leaking, and if you have a problem you can try to fix it.

Generally speaking, you should treat leaks the same way you should treat optimization. That is: make it work, then make it fast => make it work, then make it light.

Hope this helps :)

jQuery is very careful about memory leaks for example:
(I'm showing code snippets from 1.3.2, I expect later versions would be just as careful)
When you set the innerHTML of a node to '' using .html('') the following things happen

/**** jQuery's html method ****/
html: function( value ) {
    return value === undefined ?
        (this[0] ?
            this[0].innerHTML.replace(/ jQuery\d+="(?:\d+|null)"/g, "") :
            null) :
        /**** This bit will call empty on the node ****/
        this.empty().append( value );
},

/**** jQuery's empty method ****/
empty: function() {
    /**** this bit removes all dom nodes that are children ****/
    // Remove element nodes and prevent memory leaks
    jQuery(this).children().remove();

    /**** this bit just gets rid of text nodes ****/
    // Remove any remaining nodes
    while ( this.firstChild )
        this.removeChild( this.firstChild );
}

/**** jQuery's remove method ****/
remove: function( selector ) {
    if ( !selector || jQuery.filter( selector, [ this ] ).length ) {
        // Prevent memory leaks
        jQuery( "*", this ).add([this]).each(function(){

            /**** This is the important bit, all events and all data  ****/
            /**** including references to other objects and nodes are removed  ****/
            /**** Sweet! ****/
            jQuery.event.remove(this);
            jQuery.removeData(this);
        });
        if (this.parentNode)
            this.parentNode.removeChild( this );
        }
}, 

I am pretty confident that jQuery will do a pretty good job of preventing memory leaks. Of course if you do something like remove content using innerHTML you will lose this benefit. That's not to say you shouldn't do it, it's more efficient, but you either need to not care about possible leaks or be confident that child nodes don't have events or data attached to them.