1

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 に既知のメモリ リークの問題があるのか​​、それとも私が間違っているのか知りたいです。

事前にどうもありがとうございました。

乾杯

新しいアップデート:

私は問題の切り分けを試み、小さなプログラムを作成して、IE9 でメモリ リークを引き起こしているのは handlebar.js だけだったのかどうかをテストしました。

これがコードです。

(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 のメモリは増え続け、決して減ることはありません。誰かこれを見てください。

どうもありがとうございました。

乾杯

4

1 に答える 1

1

誰かが同じ問題を抱えている場合に備えて。

私はこの問題を解決しました。結局、ハンドルバーはまったく使用しませんでした。MVC4 パッケージの一部である KnockOut.js に切り替えました。

KnockOut は IE でうまく機能しましたが、KnockOut の Mapping プラグイン (javascript オブジェクトのマッピングを支援するプラグイン) では機能しなかったため、オブジェクトの各フィールドを手動でバインドする必要がありました。余分な作業はそれほど多くありませんでした。KnockOut.js を使用してメモリ リークが解決されたことをうれしく思います。

今後、Handlebar コミュニティがメモリ リークの問題を解決してくれることを願っています。

于 2012-08-06T21:42:00.017 に答える