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

【问题标题】：Chrome memory heap is just 10 MB but the task manager shows 500 MBChrome 内存堆只有 10 MB，但任务管理器显示 500 MB
【发布时间】：2013-01-29 21:36:34
【问题描述】：

我正在使用 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'
            }
            ]
        });


}

【问题讨论】：

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

标签： javascript google-chrome memory-leaks

【解决方案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'
                }
                ]
            });


    }

【讨论】：

【解决方案2】：

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

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

建议

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

【讨论】：