1

I have written a "slide show" that displays images sequentially and quickly, much like a stop-frame movie.

Once an image is displayed, I have no further use for it and would like to clear it from memory to free space for new images. However, while monitoring Google Chrome Helper in Activity Monitor, I see that the memory continues to increase steadily until the browser crashes.

I noticed a chrome garbage collection issue that was submitted as a bug and I'm wondering if maybe I'm experiencing this?

Otherwise, here is one example of a trick I tried based on this post to get Chrome to trash my old image data. 

  function ClearChunk()
  {      
        imageSet1 = null; // garbage collect please?
        imageSet1 = [];
  }

  function LoadNewChunk()
  {
        for (i=start_of_chunk;i<end_of_chunk;i++)
        {
              imageSet1[i-start_of_chunk] = new Image();
              imageSet1[i-start_of_chunk].src = img[i]; 
        }
  }

This clears first and then loads in the background, all while another array of images are being displayed. It seemed like a good idea at the time, but on my machine it still climbs steadily to about 3Gb and... Aw, Snap.

How to mitigate this rampant memory consumption in the first place?

Any conversational or code-based feedback would be appreciated.

Community
  • 1
  • 1
o1sound
  • 480
  • 7
  • 22
  • 3
    you are using lots of images in very short time, garbage collect will come only sometimes, not every time you ask. How about trying to avoid doing " = new Image()" 999999 times and find a way to do it once and only change src. – ViliusL Nov 08 '13 at 10:09
  • though you cannot ask JS to do GC at all.. this is a pure internal mechanism and nulling a value is no guarantee for GC. –  Nov 09 '13 at 05:19
  • 2
    Just to be sure since you didn't mention it : did you make sure that not a single object kept a reference of your image (an array, a DOM object, ... ???). Because that's the very first thing to check. – GameAlchemist Nov 09 '13 at 13:45
  • 1
    I've tried experimenting with it some more and so far the best solution for me is to just use less images ;) I'm sure I've kept a reference somewhere... I'll update if I come to any enlightenment. – o1sound Nov 10 '13 at 17:01

2 Answers2

3

Try doing only one 'new Image()', and reuse that, instead of creating many in the loop. This helped me solve the same issue.

Marc
  • 106
  • 1
  • 4
  • 1
    Different situation but same result. If I use an Image with a canvas drawImage to resize it in a loop, also if I delete the reference of the image and the canvas, Chrome memory grows and grows, but if I nullify the src after the resize, the garbage collector is called and the memory stop to grow. Firefox and IE don't need this workaround. – yuri Jun 17 '14 at 10:00
  • I'm pretty sure it's this: https://code.google.com/p/chromium/issues/detail?id=337425 – Marc Jun 17 '14 at 18:05
-1

webworkers ? perhaps ?

==============

recently saw something about.... if you declare a variable like...

var tempa = 0;

vs not actually declaring the variable. but just assigning it something.

var tempa = 0; // DO NOT DO

temp_no_var = 0; // there is some sort of "delete" ability that removes variable from memory or rather reduces memory space.

perhaps after image is used simply assining it null or 0. vs leaving the image data in a variable and hopefully waiting for garbage collection.

================== re-using variables, vs making huge arrays that just keep on growing and growing.

================== check out imagemagik and see about creating a "gif" animated picture. if information in the movie clip errr set of images, does not change.

Ryan Sanders
  • 141
  • 1
  • 8