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

我正在使用chrome的内存分析器查看堆大小。它总是在10MB左右。但是我的任务管理器的内存一直在增加，如果我让我的网站继续运行的话，内存会超过1GB。即使在此时，探查器中的堆大小仍然小于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'
            }
            ]
        });


}

---

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

您是否有意在全局上下文中设置

chartComponent

对变量使用

delete

将不起作用：“

delete

只对对象的属性有效。它对变量或函数名没有影响。”MDN中也有这样的说法：“与一般的看法不同，

delete

操作符与直接释放内存无关。”。我只需要使用

.destroy（）

方法，并将

chartComponent

设置为null

您的问题可能在于Chrome profiler如何与我无法访问的专有Highcharts.StockChart库交互。Chrome可以对库使用的数据进行各种处理（缓存

canvas

context等）。当你关闭分析器时，你会看到Chrome的内存使用量下降，这可能意味着在正常的使用场景中不会发生这种情况

暗示

---

尝试使用

chartComponent

上的方法更新数据，而不是创建一个全新的图表。它可能更快，占用的内存更少。

您对该页面中运行的代码类型有什么了解吗？页面上有什么循环吗？代码示例会有所帮助。每当有数据更新时，我都会使用highstock.js绘制图表。这个问题只发生在chrome上。firefox运行良好。是否有大量的“数据更新”不断出现？是的。更新频率几乎是每秒一次。你应该编辑你的帖子来添加代码。我提交了一个你可以接受的编辑，然后我会删除你添加的“答案”。

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


    }