Possible memory leak when refreshing table

matthes

Hello,

I'm currently researching why my application eats 5 MB of RAM for every automatic refresh of my table.

Here is how I initiate my table:

var tbl = $('#server-table').DataTable({
    serverSide: false,
    sDom: 'ltipr',
    columns: [
        //redacted
    ],
    createdRow: function (row, data, index) {
        //redacted
    },
    bPaginate: false,
    order: [[ 1, 'asc' ]]
}).on('draw.dt', function() {
    //Render tooltips
    $('[data-toggle="tooltip"]').tooltip(); 

    //Render sparklines
    renderSparklines('20px', '130px');

    $('.button-startServerProcess').click(function() {
        var p = new Process($(this).data('processtype'), {
            'server_id': $(this).data('serverid')
        });
        p.start();
    });
    
    $('.button-setHostStatus').on('click', function() {
        $.ajax({
            // redacted
        });
    });
    
    $('.button-cancelServerProcess').on('click', function() {
        $.ajax({
            // redacted
        });
    });
});

The data is retrieved by a class which uses window.setInterval to periodically retrieve data from the server.
Then the data will be send to a callback function to handle refreshing the table:

function updateCallback(data) {
    var api = $('#server-table').dataTable().api();
    api.clear();
    api.rows.add(data);
    api.draw();
    api = null;
}

This is the profile after the first few refreshs: http://i.imgur.com/FCzxeSE.png
A few refreshs later you can clearly see the increase in memory usage: http://i.imgur.com/YSYvE20.png

Am I missing something obvious, can anyone help?

allan

You are adding a number of events in the draw event handlers (and possibly also in the retracted functions?). Are you removing those event handlers before clearing the table (it doesn't look like it)? If not - that is the leak - event handlers are being added which are then not removed, resulting in those old DOM elements and their event handlers being retained by the browser.

You need to either remove those event handlers before deleting the rows, or (my preference) use a single delegated event handler that you don't need to add on every draw. Example.

Allan

matthes

I now moved them like you suggested but the problem persisted.
Then I tried removing renderSparklines() from my draw event and the problem seems to be gone. So I'll look into removing open sparkline handles now.

Thank you for your help, I'll report back when I find a solution.

matthes

In case someone comes across this issue as well and falsely blames datatables, here is my solution:

When the dataset is updated the sparklines within cells are removed from the DOM but there are still active handles (like allan explained).
To remove those, I store the references in a variable and call .remove() on them within my callback function and before calling api.rows.data().

Example:

var sprk = null;

function renderSparklines() {
    sprk = $('.sparkline').sparkline( ... );
}

function removeSparklines() {
    sprk.remove();
}

function updateDatatable(data) {
    removeSparklines();
    var api = $('#server-table').dataTable().api();
    api.clear();
    api.rows.add(data);
    api.draw();
}

allan

Nice one - thanks for posting back with your solution! Sparklines in a table can look fantastic :-)

Allan