Question

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

在渲染图表之前，
记忆 - 259MB
GPU内存 - 63.7MB
Javascript Memory - 22,982K（12,755K直播）

渲染图表后，
记忆 - 396MB
GPU内存 - 58.2MB
Javascript Memory - 46,233K（29,059K直播）

当评论FlotJS的绘图功能时，内存利用率会增加<1MB。

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

Answer 1

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

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

这导致了成千上万次重绘并扼杀了记忆。

但是，清空div并重新启动图表并不是重绘的正确方法。您setData，setupGrid和draw的组合should be using。这样做：

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

我的内存使用量持平。

此外，您的示例代码并未显示您如何使用emberJS。我对它不是很熟悉，但是我要非常仔细地检查它的数据绑定荣耀，它不会强迫图表过于频繁地重绘。

网页内存急剧增加

1 个答案: