网页内存急剧增加

Webpage Memory Increasing drastically

本文关键字：增加 内存 网页      更新时间：2023-09-26

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

在绘制图表之前，
内存- 259MB
GPU内存- 63.7MB
Javascript内存- 22,982K(12,755K live)

绘制图表后，
内存- 396MB
GPU内存- 58.2MB
Javascript内存- 46,233K(29,059K live)

注释FlotJS的plot函数时，内存利用率增加了1MB。

可能的原因是什么??Chrome任务管理器显示的内存值包括什么??FlotJS有没有引入内存泄漏??

查看您的代码，我可以重现内存使用情况。但我必须走极端，基本上是这样做的:

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的。我对它不是很熟悉，但我要仔细检查一下，它的数据绑定功能不会太频繁地迫使图表重绘

相关文章：