memory leak while drawing many new images to canvas

问题

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.

回答1:

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

回答2:

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.

来源：https://stackoverflow.com/questions/19850975/memory-leak-while-drawing-many-new-images-to-canvas