ember 组件内存泄漏答案

【问题标题】：ember component memory leakember 组件内存泄漏
【发布时间】：2016-01-20 18:19:55
【问题描述】：

我在大型 Ember-CLI 应用程序中遇到了非常严重的内存泄漏。我可以轻松地复制应用程序，使其速度变慢然后完全崩溃。

在花费大量时间查看性能瓶颈等（这导致了改进）之后，我确定我有内存泄漏。

本着通常的精神，我尝试制作尽可能简单的示例代码。我的结论：Ember 组件在有条件地包含时会泄漏内存。

但是，我看不到其他人在抱怨，所以想知道我是否忽略了一些明显的事情？

我的测试应用程序产生完全相同的输出，但有两种不同的方式。在这两种情况下，应用程序都会初始化，它创建了一个包含 1000 个简单对象的数据数组，其中一个属性是 vis，最初设置为 false。在初始延迟之后，这 1000 个对象的 vis 属性以 50 毫秒的间隔更改为 true。

export default Ember.Controller.extend({

    data : [],
    scrollTimer : null,

    init : function()
    {
        var data = this.get("data");

        for (var x=0;x<500;x++)
        {
            var obj = {id:x,label:"o".repeat(10) + "_" + x,vis:false};

            data.push(obj);

            obj = null;
        }

        Ember.run.later(this,this.make_visible,0,5000);
    },

    make_visible : function(idx)
    {
        var data = this.get("data");

        Ember.set(data[idx++],"vis",true);

        if (idx < data.length)
        {
            Ember.run.later(this,this.make_visible,idx,10);
        }
    },
});

在测试 1 中，我的应用程序模板如下所示：

{{#each data as |item index|}}

    {{data-item item=item}} 

{{/each}}

数据项看起来像这样：

模板：

{{component itemComponent item=item}}

js:

export default Ember.Component.extend({

        itemComponent : function()
        {
            var item = this.get("item");

            return item.vis ? "item-visible" : "item-hidden";

        }.property("item.vis"),

    });

item-visible 和 item-hidden 只是带有静态文本 hidden 和 visible 的 HBS 文件。

所以当它运行时，我得到 1000 行表示隐藏，然后慢慢变为可见。在这种情况下，data-item 中的逻辑交换哪个组件正在输出文本，最初是 item-hidden，然后是 item-visible。

Timeline snapshot from Chrome dev tools

在这里您可以看到消耗的内存不断增加。

这里有一个转折：http://ember-twiddle.com/c9c3e6c5a9908bd2c438

在 TEST 2 中，我放弃了 item-visible/item-hidden 组件，而 data-item 现在使用内联条件逻辑直接输出隐藏/可见文本。

{{#if item.vis}}
        <div>visible</div>
{{else}}
        <div>hidden</div>
{{/if}}

Timeline snapshot from Chrome dev tools

这一次内存如我所料不时被释放。

这里有一个转折：http://ember-twiddle.com/01b1abe7badea3ce3a16

所以我的问题是，为什么有条件地包含这样的组件会导致内存泄漏？我可以采取哪些不同的措施来避免它？

在我的实际应用中，我有这样的逻辑：

{{#if XXXXX}}
    {{component-x}}
{{else}}
    {{component-y}}
{{/if}}

这有同样的内存泄漏问题。

我使用的是 Ember 1.3.8（使用最新的 Ember-CLI），Twiddle 似乎使用的是 1.3.10

【问题讨论】：

你为什么不考虑打开一个问题here？
我已经做到了：github.com/emberjs/ember.js/issues/12513
仅供参考：我现在已将应用程序更新为 Ember-CLI 1.13.8 和 Ember 2.0.1。内存泄漏仍然存在。

标签： ember.js memory-leaks ember-cli

【解决方案1】：

原来存在内存泄漏。但是 Ember 团队已经解决了它，只是没有发布修复程序。 V2.2.0-beta.1 包含该修复程序，显然 v.1.3.10 也是如此。因此，如果您遇到类似问题，只需获取更新的代码即可。

非常感谢 Ember 团队查看此问题并提供修复。

【讨论】：