Memory leak with jQuery ajax (json) calls

Question

I'm making a web browser based real time game.

I'm using jQuery ajax calls to call a web service method for the client to update their speed & location via json data. Returned is a list of strings which contain data for the locations and speeds of all other players.

At the moment I'm not even passing any data and am returning an example List entry.

This is the call, made from javascript every 25ms:

$.ajax({
    type: "POST",
    url: "Default.aspx/CheckIn",
    data: "{}",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (response) { UpdateEntityList(response); }
});

This is the web service method:

[WebMethod]
public static List<String> CheckIn()//(double xPos, double yPos, double heading, double speed)
{
    List<String> Entities = new List<string>();
    Entities.Add("0|0|50|50|5|180");
    return Entities;
}

Can anyone suggest how to fix the problem, or even a better way of achieving my goal altogether? (Since I've only been doing web dev for a couple of weeks, I don't know that this is the best way)

Thanks

How do you know there's a "memory leak"? In other words, what exactly are the bad behaviors you're seeing? — Pointy, Nov 05 '10 at 21:31
You're sending *forty* AJAX requests per second? I hope your game is single-player, and your server room is fireproof. — Frédéric Hamidi, Nov 05 '10 at 21:32
I'm with Fred on this one: ajax and http requests aren't really the ideal platform for any real time interaction, especially not at 25ms accuracy intervals. If you're dead set on it - what do you mean 'memory leak'? — Anthony Corbelli, Nov 05 '10 at 21:36
Are you seeing the memory leak on the server or on the client? — Jim Mischel, Nov 05 '10 at 21:41
Fred - hence the 'or even a better way of achieving my goal altogether?' — Toby Wilson, Nov 05 '10 at 21:44
GetFresh - same as reply to Fred, and memory leak is about 40Mb a minute as reported by task manager. — Toby Wilson, Nov 05 '10 at 21:46
@Toby, as @GetFresh pointed out: "real time" games using AJAX requests to a web server can't be done (yet) (but shouldn't anyway). I'd suggest you switch your algorithm from `constantly poll game state from everybody` to `wait for each player's status update and cumulatively update game state`. — Frédéric Hamidi, Nov 05 '10 at 21:50
AJAX requests were the only way I knew how to interact with a web service from javascript; I expected they wouldn't be the best way. The game is TPS style so the calls need to be as fast and slim as possible, I feel running the game server-side and just getting speeds and positions of visible entities back to each client would be the best way; also cheatproof (not that I expect it to get that far though!) — Toby Wilson, Nov 05 '10 at 21:53
@Toby, you can do that with AJAX, just not that way. Have each client send its current status to the server *only when it changes* and have the server respond with the updated game state, based on the cumulative requests it has received from this and other clients since the last request from this client. — Frédéric Hamidi, Nov 05 '10 at 21:56
Sorry, just edited last post. The challenge here is the communication; the HTML5 canvas is amply up to the job for rendering. — Toby Wilson, Nov 05 '10 at 21:58
If you really want to stick with this as a platform: remove the timer and only update on status changes OR after the previous request has been successfully dealt with (this will still rack up bandwidth in a major way though). Also use a named function that clearly sets the used data variable to null (this might help the garbage colletor). The major problem is that javascript is too high level for very accurate timing in a 'real time' game - uses too many resources to provide such little power. — Anthony Corbelli, Nov 05 '10 at 22:46
@GetFresh, [most](http://trac.webkit.org/wiki/JS%20Core%20Garbage%20Collector) [modern](http://code.google.com/apis/v8/design.html#garb_coll) Javascript engines use a [generational](http://en.wikipedia.org/wiki/Garbage_collection_%28computer_science%29#Generational_GC_.28aka_Ephemeral_GC.29) GC. By the time the AJAX request comes back, all the involved objects would have probably been promoted to `G1` at least, which would explain the "leaks". — Frédéric Hamidi, Nov 05 '10 at 23:14

Frédéric Hamidi · Answer 1 · 2010-11-07T18:27:39.853

I'd wager that what we're all trying to say in our comments (and what @Marcel Korpel said in his answer) is that you're using the wrong technology to base your game on.

Basically, you're trying very hard to achieve something what we could do twenty years ago with a cheap 16-bit processor by issuing asynchronous requests to a web server whose primary purpose is, well, to serve documents and, to a relative extent, high-level applications. Needless to say, your code will run hundreds of interoperable, security-conscious layers away from the bare metal.

In other words, that won't work.

A real-time game such as a TPS should run primarily on the client and, if it needs network interaction, should do so using a protocol based on e.g. UDP rather than HTTP.

Read about Flash, Silverlight or even the XNA platform, but AJAX is probably not the answer to your question.

John K · Accepted Answer · 2011-01-19T22:57:00.593

Consider HTML 5 and related features

About "better way of achieving my goal altogether", yes indeed!

The proof of concept of a full fledged browser game has already been successfully carried out in Google's implementation of Quake in HTML 5. What you'll want to do is rejig your technology to be more in line with the way HTML 5 works (or will work). For example, you might want to use Web Sockets instead of AJAX calls.

Additionally take a look through Google's code blog for an overview of this game implementation and the project homepage to get sample code and learn from it.

alt text

Do some research on HTML 5 implementation levels in the various browsers to know in advance where your game will work right now. (e.g. consider HTML tag support, media support, Canvas support, etc). Also see info and wiki from the WHATWG . Here's a nifty slide presentation I like to show for demo. These technologies are still in their infancy though, so be informed. Also the W3C specs and related info.

You might have something good going if you pull it off in the early days of HTML 5 rather than following up later. A while has passed since April 2010 when Google proved Quake in the browser. This technologic will only continue to progress and be more broadly implemented over time so I suggest that you go ahead and start experimenting in that direction.

Be amazed by Google Chrome Experiments (specific to the Chrome browser of course). These examples will give you some great ideas. Pay particular attention to those games already implemented and their features to use as a gauge for your own work.

Good Luck! And have fun while increasing your skill set too.

score 1 · Answer 3 · edited May 23 '17 at 12:19

1

As others already said, you can't do an XMLHttpRequest every 25 ms. I think it's very likely that the effect you perceive (browser eating a lot of memory without releasing it) is also due to this: because the many function calls (at best every 25 ms, but it's also very likely that the JavaScript engine cannot hold up to that; read this nice answer to see how those timers work) don't allow the garbage collector to free memory anymore.

edited May 23 '17 at 12:19

Community

1
1

answered Nov 05 '10 at 22:12

Marcel Korpel

21,536
6
60
80

So what can I do? What is the best (or most popular and straightforward) means of exchanging a lot of real time information from client javascript to .net server? Or is a real time web browser based game too much to ask of javascript? – Toby Wilson Nov 05 '10 at 22:16
@Toby: Perhaps not of JavaScript, but of web communication in general, at least using these standard protocols like HTTP. – Marcel Korpel Nov 05 '10 at 22:18
@Toby, did you see the Socket.IO suggestions? – Stephen Nov 05 '10 at 22:21
Socket.IO looks like the way forward. Any good .net tutorials? – Toby Wilson Nov 05 '10 at 22:26

score 0 · Answer 4 · answered Oct 02 '12 at 19:28

change the dataType to 'text', and parse the resulting json manually with json_parse.js. It avoids using eval which is what's causing the leak.

$.ajax({
    type: "POST",
    url: "Default.aspx/CheckIn",
    data: "{}",
    contentType: "application/json; charset=utf-8",
    dataType: "text",
    success: function (response) { UpdateEntityList(response); }
});

Memory leak with jQuery ajax (json) calls

4 Answers4

Consider HTML 5 and related features