IE9 中的 Handlebar.js 内存泄漏答案

【问题标题】：Handlebar.js Memory leak in IE9IE9 中的 Handlebar.js 内存泄漏
【发布时间】：2012-07-05 05:11:35
【问题描述】：

我想知道是否有人遇到过使用 Handlebar.js 编译功能的内存泄漏。

我目前正在开发一个单页应用程序，该应用程序通过 Ajax 调用定期从服务器轮询数据。每次获得新数据时，我都会重新渲染视图。（我将Backbone.js与handlbar.js结合使用。我知道当我关闭视图或切换到其他视图时需要手动释放视图对象，我认为这里不是这种情况。至少，我认为不是。关于这个话题，请看这个链接：http://lostechies.com/derickbailey/2011/09/15/zombies-run-managing-page-transitions-in-backbone-apps/)

这是我的代码

// 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);

this.compileTemplate函数是这样的：

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

    var el = view.html(templateResult);
}

如果我注释掉“var el = view.html(templateResult);”我不会遇到内存泄漏问题。一旦我取消注释这一行，IE 9 内存消耗就开始增加。（出于测试目的，我强制视图每 0.5 秒重新编译一次模板。）

我想知道 Handlbar.js 中是否存在已知的内存泄漏问题，或者是我做错了什么。

非常感谢您。

干杯

新的更新：

我试图隔离问题，并编写了一个小程序来测试它是否只是 handlebar.js 导致 IE9 上的内存泄漏。

这里是代码。

(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);

HTML 代码在这里：

<!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>

IE 的内存只会不断攀升，永不下降。有人可以看看这个。

非常感谢。

干杯

【问题讨论】：

标签： javascript internet-explorer backbone.js handlebars.js

【解决方案1】：

以防万一有人遇到同样的问题。

我已经解决了这个问题。最后我根本没有使用车把。我切换到 KnockOut.js，它是 MVC4 包的一部分。

KnockOut 与 IE 配合得很好，但不是 KnockOut 的 Mapping 插件（一个帮助您映射 javascript 对象的插件），所以我必须手动绑定对象的每个字段。这不是太多额外的工作。我很高兴使用 KnockOut.js 解决了内存泄漏问题。

希望 Handlebar 社区将来能够解决内存泄漏问题。

【讨论】：