Question

在我继续之前，我应该说我对Chrome调试器不太满意，但是我遇到了性能问题，并且Chrome似乎在它的时间轴上反映了它。

我有两个组件。一个Parent和一个Child。 Parent模板在名为events的变量数组上循环，并将event={{.}}传递给Child。对于创建的每个Child，子项执行{{moment().format("HH:mm:ss")}}。 Parent然后用新数组替换整个events数组，{{moment().format("HH:mm:ss")}}再次执行X次。

如果您启动chrome并使用开发人员工具时间轴功能，您可以按小记录按钮然后将Next page按钮发送垃圾邮件一段时间（I直到约15％的缓冲区被填满才做到这一点然后在大约15％的数据之后你可以按垃圾按钮（GC），等待几秒钟并停止录制。

现在，您可以通过查看Listeners直接向下的位置来查看运行GC的位置。但是节点和内存分配仍然很高。

在我的实际应用程序中，计算越来越重，内存快速填充，这使得页面变得缓慢而缓慢。

这是小提琴，所以你可以尝试一下：

http://jsfiddle.net/PCcqJ/104/

修改：

经过一些调试后，我发现如果我从event={{.}}中删除Item，则不再创建无限数量的节点。我有一个列表，每页显示7个项目。然后当我按下＆＃34;下一页＆＃34; 7（始终为7）显示新项目。见代码：

{{#each dates}}
  {{#each itemsForDate(.)}}
    <div class="item">
      <Item data={{.}} />
    </div>
  {{/each}}
{{/each}}

似乎我传递给Item data的{{1}}因为某些原因而在拆解时没有收集垃圾，即使我已经删除了我自己对数据的引用。

Answer 1

我仍然不太清楚具体问题是什么，但我设法确定它与时刻js和ractive模板有关。也许是引用的东西。

当我移动我的时刻调用模板并进入组件javascript时，内存泄漏消失了。现在它非常流畅。

我的底线：不要在Reactive模板中使用moment.js。理由：此刻我不知道，我担心没时间研究。

Ractive计算模板函数泄漏？

1 个答案: