Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Already on GitHub? Sign in to your account

Handlebars.js is causing a memory leak in IE9 #271

Closed
yxh10 opened this Issue Jul 5, 2012 · 6 comments

Comments

Projects
None yet
3 participants

yxh10 commented Jul 5, 2012

Hi there,

I am wondering if any one else experience memory leak from compile function.

I am 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. I understand that I need to manually free view objects when I close the view and switch to other view, but 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/ )

Here is my code:

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 have memory leak issue. As soon as I enable this line, the IE 9 memory consumption just 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

yxh10 commented Jul 6, 2012

Hi guys,

I tried to isolate the problem, and wrote a tiny program to test whether handlebar.js has 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

jayfunk commented Oct 12, 2012

Possibly a workaround, is avoid doing this on every render:
var compileTemplate = Handlebars.compile(templateSource);
I have found that compiling the template multiple times is unecessary and that could be where the memory leak is stemming from.

Collaborator

wagenet commented Nov 2, 2012

Compiling the template multiple times could definitely cause a leak. If this does not resolve the problem, we can reopen.

@wagenet wagenet closed this Nov 2, 2012

yxh10 commented Nov 5, 2012

Thank you very much for your help. I had to switch to knockout.js to resolve the issue, because I need the view update its value real time.

However, I am really curious that if it is possible to update the view without compiling the template multiple times using handlebars.

jayfunk commented Nov 5, 2012

You can compile it only once. Once you do Handlebars.compile(template) you
can store the resulting compiled template. Then you can run that compiled
template against a context.
On Nov 5, 2012 4:59 PM, "Tim" notifications@github.com wrote:

Thank you very much for your help. I had to switch to knockout.js to
resolve the issue, because I need the view update its value real time.

However, I am really curious that if it is possible to update the view
without compiling the template multiple times using handlebars.


Reply to this email directly or view it on GitHubhttps://github.com/wycats/handlebars.js/issues/271#issuecomment-10089914.

Collaborator

wagenet commented Nov 7, 2012

For example:

var template = Handlebars.compile("<b>{{myString}}</b>");
template({ myString: "value1" }); //=> "<b>value1</b>"
template({ myString: "value2" }); //=> "<b>value2</b>"
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment