[flexcoders] Runtime Memory Problems

[One Person]

Description:
We are creating a web-app built with Flex 2.
This app uses some very large image files (From around 256K to over 
600K)
We have an image viewer section of our Flex app that will allow the 
user to move from one image to another.
I was noticing that with our app in IE7 that memory useage would 
climb each time we grabbed a new image but even after letting it set 
for several minutes the memory usage would not go down. It was acting 
as if Garbage Collection was not getting called. So I added all kinds 
of code to make sure that we were letting go of the previous images 
to allow Garbage Collection to work.
 
After 3 days of trying to track down the problem I decided to create 
a smaller Flex app that only used our image viewer control to limit 
the number of variables in the problem. After a few hours I still 
could not figure out the problem so I replace our image view with a 
standard <mx:Image> tag. The problem still existed after doing this. 
Having take our code out of the picutre I decided to compare results 
in FireFox. FireFox would Garbage Collect fairly quickly and the 
problem did not seem to exist using my test Flex app in FireFox.
 
>From what I can tell, IE7 and Flash (version 9.0.28.0) do not seem to 
work well at allowing Garbage Collection to work.
I have the same version of Flash installed in FireFox 2.0.0.2 and 
there does not seem to be any problem there.
 
The code below is what I used in my mxml file. To test it you will 
need to point to some kind of large images that you have access to. 
The images that I was using are on an internal network and so are 
unavailable to anyone on the outside.
 
<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
   layout="absolute" 
   xmlns:mx="http://www.adobe.com/2006/mxml"; 
   initialize="init()"
   >
   <mx:Script>
      <![CDATA[
         
         public var urls:Array = new Array();
         public var index:int = 0;
         [Bindable] public var tempUrl:String;
         
         private function init() : void
         {
            urls.push( "http://10.7.2.8/07026/07026_00115.jpg"; );
            urls.push( "http://10.7.2.8/07026/07026_00116.jpg"; );
            urls.push( "http://10.7.2.8/07026/07026_00117.jpg"; );
            urls.push( "http://10.7.2.8/07026/07026_00118.jpg"; );
            urls.push( "http://10.7.2.8/07026/07026_00119.jpg"; );
            urls.push( "http://10.7.2.8/07751/07751_00473.jpg"; );
            urls.push( "http://10.7.2.8/07751/07751_00474.jpg"; );
            urls.push( "http://10.7.2.8/07751/07751_00475.jpg"; );
            urls.push( "http://10.7.2.8/07751/07751_00476.jpg"; );
            urls.push( "http://10.7.2.8/07751/07751_00477.jpg"; );
            urls.push( "http://10.7.2.8/07751/07751_00478.jpg"; );
            urls.push( "http://10.7.2.8/07751/07751_00479.jpg"; );
            urls.push( "http://10.7.2.8/42401/42401_00000000.JPG"; );
            urls.push( "http://10.7.2.8/42401/42401_00000002.JPG"; );
            urls.push( "http://10.7.2.8/42401/42401_00000003.JPG"; );
            urls.push( "http://10.7.2.8/42401/42401_00000004.JPG"; );
            urls.push( "http://10.7.2.8/42401/42401_00000005.JPG"; );
            urls.push( "http://10.7.2.8/42401/42401_00000006.JPG"; );
            urls.push( "http://10.7.2.8/42401/42401_00000007.JPG"; );
            urls.push( "http://10.7.2.8/42401/42401_00000008.JPG"; );
            index = 0;
            setCurrentIndex();
         }
         
         private function setCurrentIndex() : void
         {
            img.source = urls[index];
         }
         
         private function previous_Click() : void
         {
            if( --index < 0 )
            {
               index = urls.length-1;
            }
 
            setCurrentIndex();
         }
         
         private function next_Click() : void
         {
            if( ++index >= urls.length )
            {
               index = 0;
            }
 
            setCurrentIndex();
         }
      ]]>
   </mx:Script>
   <mx:Grid width="100%" height="100%">
      <mx:GridRow width="100%" height="30">
         <mx:GridItem width="100%" height="100%">
            <mx:Button label="&lt;" click="previous_Click()"/>
            <mx:Button label="&gt;" click="next_Click()"/>
         </mx:GridItem>
      </mx:GridRow>
      <mx:GridRow width="100%" height="100%">
         <mx:GridItem width="100%" height="100%">
            <mx:Image id="img" source="{tempUrl}" width="100%" 
height="100%"/>
         </mx:GridItem>
      </mx:GridRow>
   </mx:Grid>
</mx:Application>

I can't find a way to post my images so I hope this description is 
good enough.
 
In IE7 the memory would climb each time I would move to the next 
image. On the left of this graph I loaded several images and then let 
IE7 sit. After a few minutes, and memory staying where it was, I 
continued click next to load images. Only after I hit a saturation 
point (Around 2.5Meg) would it Garbage Collect. My machine has 2Gig 
of Ram.
 
The next rise in the graph is where I kept loading images over and 
over until the memory usage was about the same as just before the 
garbage collection happened the previous time. I let that sit for a 
while and then tried to load one more image. That caused the garbage 
collection to happen.
 
The next 4 peaks in the graph are where I basicly clicked on the next 
button over and over as fast as I could and the Garbage Collection 
seemed to happen a little more often.
 
In FireFox I ran similar tests of loading images and waiting in 
FireFox. The Garbage Collection seems to be working fairly well here. 
Each time I would load a new image the previous one would be cleaned 
up with garbage collection.
 
So I'm not sure what can be done or if there is a fix for this. I 
really would LOVE to have access to the Garbage Collection in Flash 
so I could force things to happen when I am dumping a real large 
image.
 
Thanks,
Mike Collins