Question

I’m using $('#...').empty().append(html)-like construction to update content on AJAX success.
After 5-6 requests whole page goes slower and slower with each request (:hover takes more time to appear, JS slows down, etc.). This happens in any browser. The more content is loaded, the faster slowdown happens.

I think I’m missing some cleanup somewhere.
Any advice?

Code:

query = function (uri, data) {
    $.ajax({
        url: uri,
        cache: false,   
        data: data,
        success: processResponse,
        method: data?'POST':'GET',
    });
    return false;
}

processResponse = function (data) {
    $('#rightplaceholder').empty();
    $('#rightplaceholder').append(data);
}

$('#button').click( function () { query('/foo'); } );

I’ve also tried disabling all JS not directly related to loading this fragment – with no luck.

Answer 1

Sounds like a memory leak caused by whatever supplementary JavaScript you (or the data you’re loading) is running.

Remove all unnecessary code, or when removing elements from the page that are added by other code, make sure you use their API to do so, so it can have a chance to clean up.