Where is memory leak in JavaScript / jquery?

Question

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?

In FFX', does the memory usage go down after you navigate away from the page that hosts these elements? — DashK, Sep 23 '10 at 09:26
No, if I refresh a page, memory has almost the same size, no changes. It look like memory keeps all the objects. — podeig, Sep 23 '10 at 09:34

score 0 · Answer 1 · answered Sep 23 '10 at 10:26

0

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

So you can see the memory usage of your objects.

answered Sep 23 '10 at 10:26

Alex KeySmith

16,657
11
74
152

score 0 · Answer 2 · edited May 23 '17 at 11:56

0

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/

jQuery memory leak with DOM removal

edited May 23 '17 at 11:56

Community

1
1

answered Oct 27 '10 at 22:14

Barlow Tucker

6,229
3
36
42

Where is memory leak in JavaScript / jquery?

2 Answers2