Where is memory leak in JavaScript / jquery ?

Question

Hello!

I have two singletons:

Search - performs the search functionality

Topic - presentation of topics (search results)

var Search = new function () {

    this.GetTopics = function () {

        var query = $("#globalSearch").val();

        $.ajax({
            url: 'Search/GetTopics',
            dataType: 'json',
            data: { query: query },
            success: function (result) {

                var links = $("<ul />")
                            .click(function (event) {
                                Search.OpenTopicContent(event);
                            });

                $.each(result.Topics, function (key, value) {
                    links.append(
                        Topic.FormatTopic(value.Name, value.Id, value.Rank)
                    );
                });

                $("#searchResult").empty();
                $("#searchResult").html(links);
        }
    }

}();

This is Topic singleton:

var Topic = new function () {

    this.FormatTopic = function (name, id, rank) {

        var li = $("<li />")
            .attr("id", id)
            .addClass("{rank:" + rank + "}")

        var topicName = $("<p />")
            .append(name)
            .addClass("tName");

        return li.append(topicName);
    }

}();

Here is a call

$("#searchButton").click( function () { Search.GetTopics() });

So Search.GetTopics() must format a list of topics and present them in a div #searchResult.

Number of the topics can be around 100.

Problem is each search call increases memory usage with 1-3Mb. It happend in IE8 and Firefox.

It is a RIA with long-running scripts, so it is important to limit memory usage.

Where is the problem? How can I optimize the code, refactoring? Is it smart to use singletones this way?

Answer 1

The Google chrome memory profiler might be able to help you.

So you can see the memory usage of your objects.

Answer 2

Both Ajax calls and the .empty() will leak memory in IE. See the following:

http://blog.linkibol.com/2010/05/07/did-you-know-that-jquery-leaks-memory-like-a-fountain/

http://stackoverflow.com/questions/1462649/jquery-memory-leak-with-dom-removal