0

I am using chrome's memory profiler to see the heap size. Its always around 10 MB. But my task manager's memory keeps on increasing it reaches more than 1 GB if I leave my website running. Even at this time the heap size in the profiler remains less than 10 MB. However when I close the profiler the memory in the task manager reduces to around 200 MB.

Could someone please explain why the process takes so much of memory when the actual heap size is very less.

Thanks in advance.

Dev.

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'
            }
            ]
        });


}
4

2 回答 2

0

看看你的代码，我觉得有几件事很突出。

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

建议

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

于 2013-03-05T23:45:02.893 回答
0 
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'
                }
                ]
            });


    }
于 2013-02-01T00:39:32.270 回答