Memory leak with JQuery and Chrome

Memory leak with JQuery and Chrome

Hi,

Started with JQuery a few weeks ago, and I'm having a bit of a problem with my code.

I'm writing a page that uses Ajax to load up images. The user types in tags in an INPUT box, and then I use JQuery/Ajax to call php which queries a MySQL DB and returns the images matched.

I noticed that if I kept on doing this for a bit, that my browser would use more and more memory, until it either froze, crashed or Windows complained about lack of memory.

So I started to look into it, and I've got down to a simple test case that causes similar problems, and it looks like it could be JQuery, but wondered if someone could take a look, or advise on what I may have done incorrectly.

When my Ajax gets results it clears a certain DIV Element, and then updates the HTML to include the found images.

It seems that when I do that, the memory used to display the previous images isnt released, so it keeps getting bigger.

I'm using the latest version of JQuery, 1.11.1, Latest Chrome and Windows 7.

It seems to be specific to Google Chrome, so I guess it could be a problem with that, as I've also tried it in IE and Safari, and they worked fine.

My simple test case is below, but basically it loads up internally a HTML string, using a single image (small image about 40k) but adding a '?xxxx' tag on the end to make the browser think they are all different (this ISNT how the real code works, it just to show you without having to have 1000s of images).

If I run it the first time, and click 'Add JQuery' then it loads up 1000 images, the Chrome process uses about 80k. If I scroll down the page, then as I scroll more memory is used, until at the bottom of the page its at about 600mb. If I then change my 'group' field to 2, and click 'Add JQuery' again to load up a new batch, then the process stays at 600mb and raises a little, and then if I scroll down the new page it goes up to 1.2GB. This keeps on until it crashes. (about 3.5GB on my system)

If you use 'Add Native', then this doesn't happen. Once you scroll down the first 1000, and then click 'Add Native' for the 2nd batch, when it assigns the new HTML the process drops down to 100k before going up again as you scroll down the 2nd batch.

I know these are 'extreme' sizes having 1000 images on a page at a time, but its just to show the problem happening 'quickly'.

I thought it could have been that the Garbage Collector wasn't running and clearing unused memory, but I've used the dev console, and tried to 'force' it to GC but that didn't clear anything. I've also tried waiting for it to kick in.

The only way to get the memory to go back down is to go to another page.

Thanks for any input,

Rob D.

Code:

  2. <html>
  3. <head>

  5. <script src="js/jquery-1.11.1.js" type="text/javascript"></script>

  7. <script>
  8. function startJQuery() {
  9.         var newHTML = "";
  10.         var group = $("#group").val();
  11.         var item = 0;

  13.         for (var i=0;i<1000;i++) {
  14.                 item = group * 1000+ i;
  15.                 newHTML += '<img src="images/1/IMG_4957-medium-482.jpg?'+item+'">';
  16.         }

  18.         $('#content').html(newHTML);
  19. }

  21. function startNative() {
  22.         var newHTML = "";
  23.         var group = document.getElementById("group").value;
  24.         var item = 0;

  26.         for (var i=0;i<1000;i++) {
  27.                 item = group * 1000 + i;
  28.                 newHTML += '<img src="images/1/IMG_4957-medium-482.jpg?'+item+'">';
  29.         }

  31.         document.getElementById("content").innerHTML = newHTML;
  32. }
  34. </script>
  35. </head>
  36. <body>

  38. <input type="text" id="group" value=1>
  39. <a href="#" onclick="startJQuery();return false;">Add JQuery | </a>
  40. <a href="#" onclick="startNative();return false;">Add Native</a>

  42. <div id="content">

  44. </div>

  46. </body>
  47. </html>