Handlebar.js Memory leak in IE9

问题

I am wondering if any one has experienced memory leak from using Handlebar.js compile function.

I am currently working on a single page app which polls data periodically from server via Ajax call. Every time when I get new data, I re-render the view. (I am using Backbone.js in conjunction with handlbar.js. I understand that I need to manually free view objects when I close the view or switch to other view, I think that is not the case here. At least, I think it is not. Regarding to this topic please see this link: http://lostechies.com/derickbailey/2011/09/15/zombies-run-managing-page-transitions-in-backbone-apps/) <-- I have not exactly follow the approach, but I tried to unbind all the events and data, and remove all the references.

Here is my code

// 1. Remove all the old dom 
//  -- purge all objects
//  -- remove dom

Helpers.Purge(this.el); //Purge function is copied from Douglas Crockford's blog
view.empty();

this.compileTemplate(view, viewData, this.model.get("Template"));

// 2. Append the new view
var thisDom = document.getElementsByClassName(this.className);
Helpers.Purge(thisDom);

$(thisDom).remove();
$article.append(this.el);

The this.compileTemplate function is like this:

compileTemplate: function (view, data, templateSelector, ratio) {
    var templateSource = $(templateSelector).html(),
    template = Handlebars.compile(templateSource);

    var el = view.html(templateResult);
}

If I comment out "var el = view.html(templateResult);" I won't get memory leak issue. As soon as I uncomment this line, the IE 9 memory consumption start to raise. (I am forcing the view to re-compile the template every 0.5 seconds for testing purpose.)

I would like to know if there is a known memory leak issue in Handlbar.js or it is something I am doing wrong.

Thank you very much in advance.

Cheers

New updates:

I tried to isolate the problem, and wrote a tiny program to test whether it was just handlebar.js causing memory leaks on IE9.

Here is the code.

(function ($) {
function render() {
    var templateSource = $("#template").html();
    var compileTemplate = Handlebars.compile(templateSource);

    var data = {
        users: [
                { username: "alan", firstName: "Alan", lastName: "Johnson", email: "alan@test.com" },
                { username: "allison", firstName: "Allison", lastName: "House", email: "allison@test.com" },
                { username: "ryan", firstName: "Ryan", lastName: "Carson", email: "ryan@test.com" }
            ]
    };

    console.log("before compiling");
    var templateWithData = compileTemplate(data);
    $("#content").html(templateWithData);
    console.log("after compiling");


    //this.el = templateWithData;

}
setInterval(render, 500);

})(jQuery);

And the HTML code is here:

<!doctype html>
<html lang="en">
<head>

</head>

<body>
    <div id="content">

    </div>

<!-- JS -->
<script id="template" type="text/x-handlebars-template">
      <table>
        <thead>
          <th>Username</th>
          <th>Real Name</th>
          <th>Email</th>
        </thead>
        <tbody>
          {{#users}}
            <tr>
              <td>{{username}}</td>
              <td>{{firstName}} {{lastName}}</td>
              <td>{{email}}</td>
            </tr>
          {{/users}}
        </tbody>
      </table>
</script>

</body>
<script src="js/lib/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="js/lib/handlebars-1.0.0.beta.6.js" type="text/javascript"></script>
<script src="js/complieTemplateWithoutBackbone.js" type="text/javascript"></script>

</html>

The memory of IE just keep climbing up and never goes down. Can some one please have a look at this.

Thank you very much.

Cheers

回答1:

Just case any one is having same issue.

I have kind of resolved this problem. I didn't use handlebar at all in the end. I switched to KnockOut.js which is part of MVC4 package.

KnockOut worked nicely with IE, but not KnockOut's Mapping plugin (a plugin to help you to map javascript object), so I had to bind each field of an object manually. It wasn't too much extra work. I am glad using KnockOut.js resolved the memory leak.

Hopefully, Handlebar community will resolve the memory leak issue in future.

来源：https://stackoverflow.com/questions/11338114/handlebar-js-memory-leak-in-ie9

标签

javascript

internet-explorer

backbone.js

handlebars.js