Chrome內存堆只有10 MB，但任務管理器顯示500 MB

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

查看您的代碼，有些事情對我很重要。

1. 您是否有意在全局上下文中設置chartComponent ？
2. 在變量上使用delete無效。 來自MDN ：“ delete僅對對象的屬性有效。它對變量或函數名稱無效。” 同樣來自MDN：“與通常的想法不同， delete運算符與直接釋放內存無關”。 我將只使用.destroy()方法，還將chartComponent設置為null。
3. 您的問題可能出在Chrome分析器如何與我無法訪問的專有Highcharts.StockChart庫進行交互。 Chrome可能會對庫使用的數據進行各種處理（緩存canvas上下文等）。 當您關閉探查器時，看到Chrome的內存使用量減少的事實可能意味着在正常使用情況下不會發生這種情況。

建議

嘗試使用.setData()的方法chartComponent剛剛更新數據，而不是創建一個全新的圖表。 它可能更快，並且將使用更少的內存。