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.

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.

• javascript
• jquery
• performance

Share Improve this question Follow edited Oct 13, 2011 at 17:16 Eugene asked Oct 13, 2011 at 16:53 EugeneEugene 1,00011 gold badge1515 silver badges3232 bronze badges 10

• 1 What version of jQuery are you using? Do you really need to destroy and rebuild that entire section? It would be better if you can just update the existing DOM elements. – user113716 Commented Oct 13, 2011 at 17:00
• I've tried with 1.4.3 and 1.6.4, without difference. – Eugene Commented Oct 13, 2011 at 17:04
• I really need to reload whole block since it holds switchable pages, and user navigates between these with AJAX requests. – Eugene Commented Oct 13, 2011 at 17:04
• 1 Sounds more like a memory leak to me. Does the Ajenti code have its own JavaScript that it runs? Does it bind handlers? Is there anything included in its API for removing itself from a page? – user113716 Commented Oct 13, 2011 at 17:18
• 1 I had Twitter Bootstrap JS in use. Removing it fixed the problem. – Eugene Commented Oct 13, 2011 at 17:21

 |  Show 5 more ments

3 Answers 3

Sorted by: Reset to default 4

Try using $('#rightplaceholder').html(data); instead, bining two DOM manipulations into one.

Also: change cache: false to true to speed up multiple AJAX requests. If you're not submitting data, then there should be no reason not to cache the results.

In general jQuery functions have a little lot of overhead, and I'm guessing that the bination of your settings and usage create a memory leak / slowness somewhere in the system. So +1 for finding this.

If you're really just replacing html, you could use the native innerHTML property, it is well supported and does what you're trying to do here. It is usually the best method for replacing larger amounts of html. And as mentioned, it's even better to prevent replacing html a lot.

Example:

$('#rightplaceholder').innerHTML = data;

Make sure to set .innerHTML after appending the DOM element to the page, should prevent memory leaks. So using it on an existing element should be fine.

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.