网页内存急剧增加

Question

我有一个使用FlotJS呈现图表的EmberJs应用程序。 在一个特定的图表中，我们在图表中绘制了50多个条形图，网页的内存急剧增加，即使移至其他页面也不会减少。 当该图表呈现大约5倍以上时，网页崩溃。 Chrome Task Manager显示以下详细信息，

在绘制图表之前，
内存-259MB
GPU内存-63.7MB
Javascript内存-22,982K（实时12,755K）

绘制图表后，
内存-396MB
GPU内存-58.2MB
Javascript内存-46,233K（实时29,059K）

注释FlotJS的绘图功能时，内存利用率增加了不到1MB。

可能是什么原因？ Chrome Task Manager显示的“内存”值包括什么？ 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。 我不太熟悉它，但是我会非常仔细地检查它是否具有数据绑定的荣耀，而不是迫使图表重绘得太频繁。