When using Chrome's memory profiler, I notice that the heap size is always around 10 MB. However, the memory in my task manager keeps increasing and can reach over 1 GB if I leave my website running. Even though the heap size remains less than 10 MB when viewed in the profiler. Interestingly, closing the profiler reduces the memory usage in the task manager to around 200 MB.
I'm puzzled as to why the process consumes so much memory when the actual heap size is very small.
Any insights on this issue would be greatly appreciated.
Thank you kindly.
-Dev
Below is the code snippet that might shed some light on the situation:
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'
}
]
});
}