Chrome内存堆只有10MB，但任务管理器显示为500MB

Question

我正在使用chrome的内存分析器来查看堆大小。它总是在10MB左右。但是我的任务管理器的内存一直在增加，如果我让我的网站继续运行，它会达到1 GB以上。即使在此时，分析器中的堆大小仍然小于10MB。但是，当我关闭分析器时，任务管理器中的内存减少到大约200MB。

有人能解释一下为什么进程占用这么多内存，而实际的堆大小却非常小吗？

提前谢谢。

Dev.

代码如下：

updateChartData : function(priceArr, aKey, time){
    var tickData = tickDataMap[aKey+priceArr[0]];
    var price = parseFloat(priceArr[4]);
    if(tickData == undefined){
        tickData = new Array();
        tickDataMap[aKey+priceArr[0]] = tickData;
    }
    if(tickData.length > 200){
        tickData.splice(0,(tickData.length - 200));
    }
    tickData.push([time,price]);
    drawLiveTickChart(this, key);
}

function drawLiveTickChart(liveTickChart,key){
    var biddata = tickDataMap[key+'0'];
    var offerdata = tickDataMap[key+'1'];
    if(chartComponent !== null && chartComponent !== undefined){
        try {chartComponent.destroy();}catch(ex){alert("Error while drawing the tick chart : " +ex);}
        delete chartComponent;
        chartComponent = null;
    }
    chartComponent = new Highcharts.StockChart({
            chart : {
                renderTo : 'chartholder'

            },
            yAxis: {
                opposite : false
            },
            xAxis: {
                labels : {enabled:false}
            },
            plotOptions:{
                series: {
                    animation: {
                        duration: 0
                    }
                }
            },
            rangeSelector: {
                enabled : false
            },
            exporting : {
                enabled : false
            },
            navigator : {
         enabled : false,
                 height:30
             },
    scrollbar:{
        enabled : false
    },
            tooltip: {
              borderColor:"black",
              style: {
                 color: 'black'
              }
           },
            series : [{
               name : "Bid",
               data: biddata,
               color : '#008080'
            },{
                name : "Offer",
                data: offerdata,
                color : '#02D4D4'
            }
            ]
        });


}

Answer 1

This is the code :

updateChartData : function(priceArr, aKey, time){
                var tickData = tickDataMap[aKey+priceArr[0]];
                var price = parseFloat(priceArr[4]);
                if(tickData == undefined){
                    tickData = new Array();
                    tickDataMap[aKey+priceArr[0]] = tickData;
                }
                if(tickData.length > 200){
                    tickData.splice(0,(tickData.length - 200));
                }
                tickData.push([time,price]);
                drawLiveTickChart(this, key);
            }

function drawLiveTickChart(liveTickChart,key){
        var biddata = tickDataMap[key+'0'];
        var offerdata = tickDataMap[key+'1'];
        if(chartComponent !== null && chartComponent !== undefined){
            try {chartComponent.destroy();}catch(ex){alert("Error while drawing the tick chart : " +ex);}
            delete chartComponent;
            chartComponent = null;
        }
        chartComponent = new Highcharts.StockChart({
                chart : {
                    renderTo : 'chartholder'

                },
                yAxis: {
                    opposite : false
                },
                xAxis: {
                    labels : {enabled:false}
                },
                plotOptions:{
                    series: {
                        animation: {
                            duration: 0
                        }
                    }
                },
                rangeSelector: {
                    enabled : false
                },
                exporting : {
                    enabled : false
                },
                navigator : {
             enabled : false,
                     height:30
                 },
        scrollbar:{
            enabled : false
        },
                tooltip: {
                  borderColor:"black",
                  style: {
                     color: 'black'
                  }
               },
                series : [{
                   name : "Bid",
                   data: biddata,
                   color : '#008080'
                },{
                    name : "Offer",
                    data: offerdata,
                    color : '#02D4D4'
                }
                ]
            });


    }

Answer 2

看看你的代码，有几件事让我印象深刻。

1. 您是否有意在全局上下文中设置chartComponent？
2. 在变量上使用delete将不起作用。From MDN："delete只对对象的属性有效。它对变量或函数名没有影响。“同样来自MDN：“与通常的想法不同，delete运算符与直接释放内存无关”。我会使用.destroy()方法，并将chartComponent设置为null。
3. 您的问题可能出在Chrome分析器与我无法访问的专有Highcharts.StockChart库的交互方式上。Chrome可以对库使用的数据做各种事情(缓存canvas上下文等)。关闭分析器时，您看到Chrome使用的内存减少，这可能意味着在正常使用情况下不会发生这种情况。

建议

尝试在chartComponent上使用.setData()方法仅更新数据，而不是创建一个全新的图表。它可能更快，并且会使用更少的内存。