XMLHttpRequest + setTimeout = Memory Growing to Heaven

[Sergio Denis]

Hi! I'm developing a chrome extension and I tried hard all the solutions in the web but no one seems to work. My jsscript only consume an html (about 13,30k per request) via XMLHttpReq(XHR) and parse the response , dropping everything that no match with some regex. All this happen with a setTimeout inside in the XHR onload method and seems to work but the problem comes after 10minutes aprox. when I saw what happens in memory. After 10minutes the extensions mem grows from 10mb to 60. So ..what happens and exist any kind of solution to this? I read that is a normal grow because its a new request and the Garbage Collector runs after a while (so late) but for my its another thing. Thanks in advance and SORRY FOR MY BAD ENGLISH.

  var CHECK_TIME = 30000;  //ms
  var request = new XMLHttpRequest();

  var checkLastPage = {
    url:"http://www.last.fm/inbox",
    inboxId:"inboxLink",
    lastAttempt:0,    
    init : function(){        
        request.onload = function(){    
          checkLastPage.loadStuff(request); // parse response
          setTimeout(checkLastPage.init, CHECK_TIME);          
        } 
        request.open("GET",checkLastPage.url,false);
        request.send();
    },
    loadStuff:function(request){
        var node = checkLastPage.getInboxNode(request);
         //more code
    },
    getInboxNode:function(request){
        var htmlTemp = document.createElement('div');
            htmlTemp.innerHTML = request.responseText;   // Hack horrible para poder parsear el nodo importante 
        var htmlResponse =  htmlTemp.getElementsByTagName('li');
        var relevantNode = null;
         for (var i = 0; i < htmlResponse.length; i++) {
            var node = htmlResponse[i];
            if(node.id == checkLastPage.inboxId){
              relevantNode = node;
            }                
         }
         htmlResponse = null;
         htmlTemp = null;   
         return relevantNode;
    }
         //more code ....
  }

[Raja Pal]

Hello Denis, What do you mean by after 10 mins memory grows from 10 MB to 60 MB, is this a sudden shoot that you see or is the memory increase gradual over 10 mins? Also what do you do in the rest of the code might have a clue to the huge memory consumption. Parsing large HTML/XML blocks - in most browsers - DOES take a lot of memory and you need to wait for the collector to kickin. However you can trust the collector will definitely start before the browser process start struggling. Also, you may want to ensure that parsed nodes, after rendering are not held in references or function variables, this is a frequent cause of mem-leaks in javascript.

[Sergio Denis]

Hey Raja , Thanks for the reply!

What I mean with memory growing is that mem increased gradually across extension's live.
I modified my algorithm (using JQuery) for a proof concept without the parse part , assuming that the problem was in there and not in XHR. But same result , mem still grows incrementally forever.
So I suspect that XHR hold memory and GC never release all the stack (I run manually GC from Developer Tools , from 60mb down to 50mb when gc run) and I never saw GC running naturally (triggered by Chrome) . I will test this in a virtual with low mem so i can see what happens.

What do you mean with "after rendering are not held in references or function variables, this is a frequent cause of mem-leaks in javascript." ?

  
   setInterval(function(){
      callLastFm();
   },CHECK_TIME);

  var noop = function(){};

  function callLastFm(){
      var request = $.ajax({
          url:checkLastPage.url,
          timeout: 1000,
          type:"GET",
          success:function(data){          
            console.log("Memory leak");
          }
      });

      request.onreadystatechange = noop;
      request.abort = noop;
      request = null;          
  }