Question

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

有人可以解释为什么当实际堆大小非常小时，进程会占用大量内存。

提前致谢。

开发。

这是代码：

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

看看你的代码，有些事情对我很突出。

您是否故意在全球范围内设置chartComponent？
对变量使用delete将不起作用。 From MDN：“delete仅对对象的属性有效。它对变量或函数名称没有影响。”同样来自MDN：“与普通信念所暗示的不同，delete运算符与直接释放内存无关”。我只想使用.destroy()方法，并将chartComponent设置为null。
您的问题可能出在Chrome Profiler如何与我无法访问的专有Highcharts.StockChart库进行交互。 Chrome可以使用库使用的数据（缓存canvas上下文等）执行各种操作。当您关闭分析器时，您看到Chrome内存使用量下降的事实可能意味着在正常使用场景中不会发生这种情况。

建议

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

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

2 个答案:

建议