Skip navigation

Tag Archives: Flex 3 performance

Image caching with Flex 3

As always I will start with my examples because I know most people want to see a demo before reading about it. Both of these examples are identical except for one line of code which flags image caching on or off. I have added stats.as so you can see the memory usage as you load more images. You will notice that when using the example with image caching you can load hundreds of images with little memory impact and it is much faster than the example with out caching. Also if you do not believe stats.as open up your task manager and view the memory usage of your browser to confirm that ImageCache is really working.
View source is enabled so you can see whats going on.

App NOT using cache
App using cache

I have seen several Flex 3 image caching solutions out on the web but most of them seemed to subclass SWFLoader or Image. In my opinion the Image class should know nothing about caching, it should just know about displaying the image. Why add extra functionality to the Image class? Why not have something else manage the caching? So I created ImageCache which is a utility class that handles caching images which can then be used as the source for any Image component.

The reason I like this approach is that it leaves the Image class alone and if you want to cache something you do not need to swap all the Images in your app with some subclass. You only need to change the way you set the Images source property.

I thought the browser cached images?

You may think that you don’t need to cache your images in Flex because your browser is already doing that. While it is true that your browser is caching the images that your Flex app requests it probably works a little different then you think. For example the first time you load an image you might notice that it takes a second, but if you load that same url again it shows up right away. This must mean that it is using a cached version of the image right? Well thats partly correct your browser is giving you a cached version of the image BUT, your Flex app is creating a whole new instance of that image data. So by default you get a speed gain with your browsers cache but what you are not getting is any memory gains. Each time you load that image your Flex app’s memory usage will go up by the size of that image. This is because each Image component keeps a separate BitmapData for its own use. In some cases this is good but most of the time it is not necessary and can be wasteful.

If we cache the images in the app it self we can achieve even faster loading speeds because we do not even need to ask the browser for the image. Second and even better, we can reuse the same image over and over with almost no memory overhead. This is done by sharing the same BitmapData between multiple Image components.

How it works

ImageCache works by keeping a mapping between URL and BitmapData. When you use ImageCache to cache an image it will load the image and then store the BitmapData for that image. Then when you want to set an Image component’s source to that image ImageCache will create a new Bitmap using a reference to the stored BitmapData. This means that there is almost no memory overhead and the image will load almost instantly because we are just referencing the BitmapData instead of creating a whole new copy of it. One thing to note is that because of the BitmapData sharing if you change the underlaying BitmapData of one of the Images all of the Images referencing that BitmapData will also change. This may or may not be good for you depending on how your app works.

ImageCache currently has 4 public methods:

public function setImageSource(image:Image, source:Object):void
public function cacheImage(source:Object):void
public function flushImage(source:Object):void
public function loadIntoCache(source:Object):void

The setImageSource method allows you to set an Image’s source using the cache. If the url is not cached already this method will cache the image and set the Image component’s source. If the image is already cached it will just set the Image component’s source.

Next the cacheImage method will simply cache an image with out setting any component’s source. This is useful for pre-caching images so they can be used later on with out having to load them.

If you want to flush an image from the cache you can use the flushImage method to do so. This method removes an image from the cache meaning that the next time it is requested it will ask the browser.

Lastly the flush method will clear all images in the cache.

When you use the setImageSource method you do not have to worry about timing or whether or not the image has been cached yet because ImageCache already accounts for that. It will keep a list of Image components that want a certain source and once it has finished caching it will go back and set it on all the Images that were waiting.

One more thing. I require Image components but that could easily be swapped out for SWFLoader or whatever class you wanted. This is just a quick example to show the benefits of using caching in your app. The same techniques could also be used to cache any type of file your app might be loading .swf, .pdf, .xml and so on.

Performance issuses when using trace

The other day I was working on a custom component that could be dragged and resized, and in my updateDisplayList method I was tracing a couple things so I could see what was going on. I noticed some very drastic slow downs and I was pretty sure that it was my trace statements causing to much I/O overhead. Anyway this got me wondering so I created some tests to see just how much the trace statement can affect performance of a Flex App, because I have seen and written many lines of code where not all of the trace statements are removed before release builds. This used to no be a problem because inside of Flash we could choose to omit traces from our published version of the swf, but when writing Flex correct me if I am wrong there is built in way to remove traces.

Below I have made some examples to show the performance hits that come along with those extra traces. All of the examples here have been built using Flex builder release build.  While a trace here and there may not be to bad if they sneak their way into a loop or a validation method, which gets called very often, they can seriously slow your app down.

Want proof? Read on

I put together a couple Flex apps to demo how trace can slow down your app.  I decided that I will create a function that simply loops for a specific amount of time, in this case 100 milliseconds, and increments a counter with each iteration.  In these examples there is a button that will start the loop and once the loop has completed the total number of iterations will be displayed.  Now because there is no good way to include these swfs in this lovely wordpress blog below are links to where you can see these in action.
Trace Tests

The results tell the tale

I ran these tests on my laptop which has a dual core 2.5 with 4 gigs of ram and here is what I saw.  When I ran the test with traces I saw on average 500 iterations with the debug version of flash player and 60,000 with the normal version.  Then I was surprised when I ran the test with out traces where I saw around 900,000 iterations.  All I can say is wow, I mean I knew I/O was expensive but this was a much bigger difference than I thought there would be.  Now you might be thinking why do the trace statements even effect the performance here, because after all there is nothing being output.  But infact the traces are still happening even though you can not see them, for instance if you have the debug version of the flash player you can view these traces in the flashlog.txt file.  This is why the debug versions numbers were so low because each trace causes disk I/O.  This is another reason not to trace to much because someone could be reading your traces.

What can you do?

Another way is to wrap your trace statments in a conditional.  See the example below.

Conditional Trace Test 

Yeah I know you would not use a checkbox to control your traces in a real application you would be much better off setting a constant.

    private const DEBUGGING:Boolean = true;
    .
    .
    .
    if (DEBUGGING) {
        trace("what ever");
    }

Ok so thats not to bad but it still requires a code change to go from debug mode to release mode.  

As another alternative you could write a script to preprocess your ActionScript that removes all the trace statements before they you compile.  Not sure about you but I would rather not have a script messing with my code.

The better way to use trace

Thanks to ActionScript 3 we can now do compile time conditionals. Basically we set a variable during compile time that we can reference which we can reference in the code.  Again you will wrap your trace statements in a conditional but this time it will look a little different:

    CONFIG::debugging {
        trace(counter);
    }

Now some of you may have not seen anything like this before.  What this code is doing is checking for a compile time variable called “debugging” and if it is set to false the trace will be skipped if debugging is true of course you will get your trace statement.  This is pretty cool because now you can switch from debug to release with out changing any code. To add a compile time variable you simply use the following syntax to to your command line mxmlc or to the compile options in Flex Builder.

    -define=CONFIG::debugging,false

This works in both Flex Builder and via command line mxmlc or what ever else you use e.g. ant.  The code above would of course set debugging to false effectively removing all trace statements.  Then when you need to debug simply rebuild the swf with

    -define=CONFIG::debugging,true

and magically your traces will come back.  For more information on conditional compilation see Adobes site http://livedocs.adobe.com/flex/3/html/help.html?content=compilers_21.html.  Of course I have some examples to show you.  Keep in mind that both of these swfs were compiled from the EXACT same code the only change was in the compile options that were used to build it.

Compile Time Test

Conclusion

Well as you could see from the above examples while the trace statement is probably one of the easiest ways to do some simple debugging it can cause some performance issues. Anyways just keep in mind what I have talked about and use tracing only when necessary and try to remember to remove them when you are done.  If you can not remove them try wrapping them in a compile time conditional.