在我的应用程序，我显示10图（图来自 dygraphs 。）监测数据。为了显示图表，我从我断绝发送Ajax请求4的servlet每5秒中获取数据。 10-15分钟后（不知道确切的时间。）我的浏览器崩溃说啊!!折断。可能是什么原因？它是JavaScript的是造成的呢？或者是因为我发送请求每5秒？

浏览器测试：Firefox和Chorme

注： - 当我刷新浏览器崩溃后重新正常工作10-15分钟

JS code：

 变种i = 0;
VAR LOC =新的String（）;
VAR康恩=新的String（）;
VAR heapUsage =新的String（）;
VAR cpuUsage =新的String（）;
VAR thrdCnt =新的String（）;
VAR heapUsageConsole =新的String（）;
VAR cpuUsageConsole =新的String（）;
VAR thrdCntConsole =新的String（）;
VAR用户=新的String（）;
VAR MemTotal =新的String（）;
功能jubking（）{
    VAR XMLHTTP;
    如果（window.XMLHtt prequest）{
        XMLHTTP =新XMLHtt prequest（）;
    } 其他 {
        XMLHTTP =新的ActiveXObject（Microsoft.XMLHTTP）;
    }
    VAR URL =MonitorDBServlet;
    xmlhttp.open（POST，网址，虚假）;
    xmlhttp.send（空）;
    VAR海峡= xmlhttp.responseText;
    变种strArr = str.split（，）;
    URL =MonitorTomcatServlet;
    xmlhttp.open（POST，网址，虚假）;
    xmlhttp.send（空）;
    VAR appstr = xmlhttp.responseText;
    变种appArr = appstr.split（，）;
    URL =MonitorConsoleTomcatServlet;
    xmlhttp.open（POST，网址，虚假）;
    xmlhttp.send（空）;
    VAR appstrConsole = xmlhttp.responseText;
    变种appArrConsole = appstrConsole.split（，）;
    URL =CpuMemoryServlet;
    xmlhttp.open（POST，网址，虚假）;
    xmlhttp.send（空）;
    VAR statesStr = xmlhttp.responseText;
    变种状态= statesStr.split（，）;
    如果（ⅰ→30）{
        LOC = loc.substring（loc.indexOf（\ N的）+ 1）;
        禄+ = I +，+ strArr [0] +，+ strArr [1] +\ N的;
            // ---做同样的事情，所有其他变种
} 其他 {
        禄+ = I +，+ strArr [0] +，+ strArr [1] +\ N的;
            // ---做同样的事情，所有其他变种
    }
    的document.getElementById（dbSize）的innerHTML = strArr [3]。
    的document.getElementById（HeapMemoryUsageMax）的innerHTML = appArr [1]。
    。的document.getElementById（HeapMemoryUsageMaxConsole）的innerHTML = appArrConsole [1];
    G =新Dygraph（的document.getElementById（dbLocks），
        locksheld，lockswait \ N+禄+）;
    G =新Dygraph（的document.getElementById（的ActiveConnection），
                    连接\ N+康恩+）;
    G =新Dygraph（的document.getElementById（例2），
                       heapUsage \ N+ heapUsage +）;
    G =新Dygraph（的document.getElementById（示例3），
                       cpuUsage \ N+ cpuUsage +）;
    G =新Dygraph（的document.getElementById（例4），
                       ，螺纹，peakThread \ N+ thrdCnt +）;
    G =新Dygraph（的document.getElementById（example6）​​，
                       heapUsage \ N+ heapUsageConsole +）;
    G =新Dygraph（的document.getElementById（实施例7），
                       \ N+ cpuUsageConsole +）;
    G =新Dygraph（的document.getElementById（example8），
                       ，螺纹，peakThread \ N+ thrdCntConsole +）;
    G =新Dygraph（的document.getElementById（cpuStates），
                       用户，系统，美观大方，闲置\ N+用户+）;
    G =新Dygraph（的document.getElementById（memStates），
                     ，MT，MF，B，C，ST，SF \ N+ MemTotal +）;
    I = I + 1;
    的setTimeout（jubking（），5000）;
}
 

解决方案

我怀疑你的 dygraphs 的用法是，当你注意到你的意见，你的麻烦之源。它看起来像你一遍又一遍结合新的图形时，你只需要更新数据，使用一个移动窗口的数据也会有所帮助。请尝试重新加工您的更新工作，这样的伪JavaScript的：

  VAR图= {
    dbLocks：{
       图：新DyGraph（/ * ...... * /），
       数据：  [ ]
    }，
    的ActiveConnection：{
        图：新DyGraph（/ * ...... * /），
        数据：  [ ]
    }，
    // 等等。
};

VAR DATA_WINDOW_SIZE = 1000; //或任何适合你的。

功能更新（其中，NEW_DATA）{
    VAR G =图表[这]
    g.data.push（NEW_DATA）;
    如果（g.data.length＆GT; DATA_WINDOW_SIZE）
        g.data.shift（）;
    g.graph.updateOptions（{文件：g.data}）;
}

功能jubking（）{
    //启动所有的AJAX调用和一个回调绑定到每个
    // 一。成功回调将调用update（）函数
    //上面更新图表和管理数据窗口。

    //等待所有上述异步AJAX调用来完成，
    //然后重新启动定时器，为下一轮。
    的setTimeout（jubking，5000）;
}
 

其基本思想是利用窗口中的数据具有合理的最大宽度，这样的数据不会增长咀嚼你所有的记忆。当你在你的数据高速缓存的末尾添加一个新的数据点，你把旧关的另一端，一旦你打你的最大舒适的尺寸。

您可以找到一些技巧等待几个异步AJAX调用来完成在这里：How确认时，不止一个AJAX调用完成（披露：是的，这是我其他的答案一个）？

In my app I'm displaying 10 charts (charts are from dygraphs.) to monitor data. For displaying charts I'm getting data from my sever by sending ajax request to 4 servlets on every 5 seconds. After 10-15 mins (don't know exact time.) my browser crashes saying "aw!! snap." What could be the reason? Is it javascript that is causing it? or is it because I'm sending request every 5 seconds?

Browser tested: Firefox and Chorme.

Note:- When I refresh the browser after crash it again works fine for 10-15 mins.

JS code:

var i=0;
var loc = new String();
var conn = new String();
var heapUsage = new String();
var cpuUsage = new String();
var thrdCnt = new String();
var heapUsageConsole = new String();
var cpuUsageConsole = new String();
var thrdCntConsole = new String();
var user = new String();
var MemTotal = new String();
function jubking(){
    var xmlhttp;
    if (window.XMLHttpRequest) {
        xmlhttp = new XMLHttpRequest();
    } else {
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    var url = "MonitorDBServlet";
    xmlhttp.open("POST", url, false);
    xmlhttp.send(null);
    var str = xmlhttp.responseText;
    var strArr = str.split(",");
    url = "MonitorTomcatServlet";
    xmlhttp.open("POST", url, false);
    xmlhttp.send(null);
    var appstr = xmlhttp.responseText;
    var appArr = appstr.split(",");
    url = "MonitorConsoleTomcatServlet";
    xmlhttp.open("POST", url, false);
    xmlhttp.send(null);
    var appstrConsole = xmlhttp.responseText;
    var appArrConsole = appstrConsole.split(",");
    url = "CpuMemoryServlet";
    xmlhttp.open("POST", url, false);
    xmlhttp.send(null);
    var statesStr = xmlhttp.responseText;
    var states = statesStr.split(",");
    if(i>30){
        loc = loc.substring(loc.indexOf("\n")+1);
        loc += i+","+strArr[0]+","+strArr[1]+"\n";
            //--- Do same thing all other var
} else {
        loc += i+","+strArr[0]+","+strArr[1]+"\n";
            //--- Do same thing all other var
    }
    document.getElementById("dbSize").innerHTML = strArr[3];
    document.getElementById("HeapMemoryUsageMax").innerHTML = appArr[1];
    document.getElementById("HeapMemoryUsageMaxConsole").innerHTML = appArrConsole[1];
    g = new Dygraph(document.getElementById("dbLocks"),
        ",locksheld,lockswait\n"+loc+"");
    g = new Dygraph(document.getElementById("activeConnection"),
                    ",Connections\n"+conn+"");
    g = new Dygraph(document.getElementById("example2"),
                       ",heapUsage\n"+heapUsage+"");
    g = new Dygraph(document.getElementById("example3"),
                       ",cpuUsage\n"+cpuUsage+"");
    g = new Dygraph(document.getElementById("example4"),
                       ",thread,peakThread\n"+thrdCnt+"");
    g = new Dygraph(document.getElementById("example6"),
                       ",heapUsage\n"+heapUsageConsole+"");
    g = new Dygraph(document.getElementById("example7"),
                       ",\n"+cpuUsageConsole+"");
    g = new Dygraph(document.getElementById("example8"),
                       ",thread,peakThread\n"+thrdCntConsole+"");
    g = new Dygraph(document.getElementById("cpuStates"),
                       ",user,system,nice,idle\n"+user+"");
    g = new Dygraph(document.getElementById("memStates"),
                     ",MT,MF,B,C,ST,SF\n"+MemTotal+"");
    i = i + 1;
    setTimeout("jubking()", 5000);
}

I suspect that your dygraphs usage is, as you note in your comments, the source of your trouble. It looks like you're binding new graphs over and over again when you only want to update the data, using a moving window for the data would also help. Try reworking your updater to work like this pseudo-JavaScript:

var graphs = {
    dbLocks: {
       graph: new DyGraph(/* ... */),
       data:  [ ]
    },
    activeConnection: {
        graph: new DyGraph(/* ... */),
        data:  [ ]
    },
    // etc.
};

var DATA_WINDOW_SIZE = 1000; // Or whatever works for you.

function update(which, new_data) {
    var g = graphs[which];
    g.data.push(new_data);
    if(g.data.length > DATA_WINDOW_SIZE)
        g.data.shift();
    g.graph.updateOptions({ file: g.data });
}

function jubking() {
    // Launch all your AJAX calls and bind a callback to each
    // one. The success callback would call the update() function
    // above to update the graph and manage the data window.

    // Wait for all the above asynchronous AJAX calls to finish and
    // then restart the timer for the next round.
    setTimeout(jubking, 5000);
}

The basic idea is to use window on your data with a reasonable maximum width so that the data doesn't grow to chew up all your memory. As you add a new data point at the end of your data cache, you drop old ones off the other end once you hit your maximum comfortable size.

You can find some techniques for waiting for several asynchronous AJAX calls to finish over here: How to confirm when more than one AJAX call has completed? (disclosure: yes, that's one of my other answers).