Question

I am developing a .NET web application where I have to do ajax requests with the javascript function setInterval() to refresh the information of some pages.

With each ajax request I receive a xml response of about 68 KB that I manage to do visual changes in the html through jQuery. I set the interval to 2000 milliseconds but I would like, or rather, I am going to need to reduce it to 1000 ms.

Unfortunately, with each request the memory consum of the CPU increases and this provokes that the browser gets blocked and the user can’t use it unless he reloads the page. I have tested this in Firefox, Internet Explorer and Chrome but the result is always the same. If I don’t do setInvertal(), the problem disappear.

Also, I have been testing the scope of all my javascript variables but I haven’t found anything wrong and I suppose that Javascript has a efficient garbage collector to clean them.

I hope I have explained clear the issue. Does someone have some idea to resolve it?

Modified: I am using jQuery framework. My code is:

var tim;
$(document).ready(function () {
  tim = window.setInterval("refresh()", 2000);
});

function refresh() {
   $.post("procedures.aspx", $("#formID").serializeArray(), function (data) {
     if (data != ""){
       var xml = $.parseXML(data);

       ... (read and process xml to do changes in the html)

     }
   }
}

Answer 1

You haven’t posted any code snippet for inspection, so my answer is based on an error commonly made when creating such “polling” functions. I’m also assuming that you are doing things manually, without using frameworks like jQuery or MooTools.

Your problem is most likely to be caused by creating new a XMLHttpRequest object in each polling call, instead of creating one such instance outside of setInterval, and opening and using this time and again.

Basically, you may be writing your code like this:

var pollInterval = setInterval(function() {
    var xhr = new XMLHttpRequest(); //ouch, this hurts!
    xhr.open('GET', 'url', true);
    xhr.send();
    //etc.
}, 2000);

If this is the case, merely move the XMLHttpRequestObject creation out of the polling loop to ensure that you use the same object again and again, thereby preventing a memory leak of sorts (if I may call it that).

var xhr = new XMLHttpRequest(); //now we can re-use this!
var pollInterval = setInterval(function() {
    xhr.open('GET', 'url', true);
    xhr.send();
    //etc.
}, 2000);

Again, you haven’t posted any code snippet, or details of any frameworks you may be using. So what I’m suggesting is based on an error I’ve encountered frequently when inspecting polling ajax code. Hope this helps. If not, do edit the question and post some code.

Disclaimer: I used only the XMLHttpRequest object for brevity, not vendor hate (or love). You’ll obviously use a cross-browser request object instantiation function, or better still a library which abstracts away these gory details.

 

Updates

---

So, your code needs to update the dom every two seconds? For as long as the page is loaded? Wihout ever stopping? I thought I’d see a clearInterval somewhere, but anyways.

This is a bit awkward. The closest I’ve gotten to such a situation is when I needed to code a pulse line, based on a ticker API, for diplaying a real-time (ok, pseudo-realtime at 1s) graph. The good part in my case was that the API was blazing fast, with super low latency, the data I received was a mere float, and the dom manipulation I did with it was of negligible space-time complexity.

My concern here is that if the server doesn’t respond in two seconds, or if it does close to two seconds, then you have a piece of complex code which is already eating in significant milliseconds of those two second intervals. The dom may not update every two seconds!

1. Hygienic tip: Get rid of the quotes in
   window.setInterval("refresh()", 2000). It should just be
   window.setInterval(refresh, 2000) Reasons are here: Memory leak for javascript setInterval

2. So, $.post will definitely create new XHR objects every two seconds,
   as per the code. Realistically, what are the server response times
   like? How many times does setInterval loop? For low counts, say for
   response times below 10 seconds, new XHRs should not be ‘THE’
   problem.

3. 500 line XML parsing? Each interval? Sounds painful to me. Will it
   be possible for you to tokenize the XML into a JSON string on the
   server, and return this string to the UI? It will save client CPU cycles
   for sure.

HTML with 11000 lines. So that’s a lot of dom traversal and manipulation. Here’s a small checklist:

1. Are you using best selectors? (speficity of your xpath expressions). Shizzle has you covered there, but do the best you can. Things like $(‘p *’) can wreck havoc.
2. Have you minimized document reflow?
3. Loops: Using for, or mapped functions over arrays are the best (most
   efficient)

4. Property access: Are you cutting down on repeated nested property
   access, and using one-off references for efficiency?

5. Appending/Manipulating efficiency: For example: do you append
   individual list items? Ideally you should append the whole list
   chunk in one go. Same for deletions etc. Basically, chunky one-time
   manipulations instead of repeated manipulations.

Difficult to nail this one, without understanding the low level intentions and mechanics of your use-case.