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

yxh10 · 2012-07-05T04:58:28Z

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

The text was updated successfully, but these errors were encountered:

yxh10 · 2012-07-06T02:09:21Z

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 · 2012-10-12T15:41:12Z

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.

wagenet · 2012-11-02T16:24:54Z

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

yxh10 · 2012-11-05T21:59:05Z

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 · 2012-11-05T23:57:19Z

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//issues/271#issuecomment-10089914.

wagenet · 2012-11-07T06:13:00Z

For example:

var template = Handlebars.compile("<b>{{myString}}</b>");
template({ myString: "value1" }); //=> "<b>value1</b>"
template({ myString: "value2" }); //=> "<b>value2</b>"

AnirudhaGohokar · 2022-09-16T06:59:03Z

Although its quite an old issue, we have huge memory leaks happening when compiling templates of size > 32kb. For now we have switched to mustache.js which has resolved the memory leak.

I think the root cause of the issue should be fixed.

wagenet closed this as completed Nov 2, 2012

ChristopherDay mentioned this issue Feb 22, 2017

Add a note to avoid compiling the same template multiple times wycats/handlebars-site#172

Open

AnirudhaGohokar mentioned this issue Sep 16, 2022

Memory leak when invoking compiled templates #1885

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

yxh10 commented Jul 5, 2012

yxh10 commented Jul 6, 2012

jayfunk commented Oct 12, 2012

wagenet commented Nov 2, 2012

yxh10 commented Nov 5, 2012

jayfunk commented Nov 5, 2012

wagenet commented Nov 7, 2012

AnirudhaGohokar commented Sep 16, 2022

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

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

Comments

yxh10 commented Jul 5, 2012

yxh10 commented Jul 6, 2012

jayfunk commented Oct 12, 2012

wagenet commented Nov 2, 2012

yxh10 commented Nov 5, 2012

jayfunk commented Nov 5, 2012

wagenet commented Nov 7, 2012

AnirudhaGohokar commented Sep 16, 2022