网页内存急剧增加

Question

我有一个EmberJs应用程序，它使用FlotJS来呈现图表。在一个特定的图表中，我们在图表中绘制50+条形图，网页的内存急剧增加，即使在移动到其他页面之后也不会减少。当该图表呈现一些5+时，网页就会崩溃。Chrome任务管理器显示以下详细信息：

在绘制图表之前，

内存-259 Memory

GPU内存- 63.7MB

Javascript内存-22,982 K(12,755 K活动)

在绘制图表之后，

内存-396 Memory

GPU内存- 58.2MB

Javascript内存-46,233 K(29,059 K活动)

当注释FlotJS的绘图函数时，内存利用率增加了& in；1MB。

可能的原因是什么？Chrome任务管理器显示的内存值由什么组成？？FlotJS是否引入了内存泄漏？？

Answer 1

看看您的代码，我可以重现内存的使用情况。不过，我不得不走极端，实际上是这样做的：

while(true)
{
    $('.flot').empty();
    $.plot(".flot", [JSON.parse(data)] );
}

这导致了成千上万的重绘和咀嚼记忆。

然而，清空div并重新输入图表并不是重新绘制的正确方法。应该用是setData、setupGrid和draw的组合。这样做：

var splot = null;
while(true)
{
    if (splot == null)
    {
        splot = $.plot(".flot", [JSON.parse(data)] );
    }
    else
    {
        splot.setData([JSON.parse(data)]);
        splot.draw();
    }       
}

我的记忆使用率很低。

而且，您的示例代码没有显示您是如何使用emberJS的。我对它不是很熟悉，但我会非常仔细地检查，在它的数据绑定的荣耀，它没有强迫图表重新绘制太频繁。