Caching images loaded from a spark item renderer

I recently created a form in Flex that required using multiple DropDownLists with a custom item renderer that loads in preview images of each item. This was really easy to do initially, but I noticed a couple performance issues that bothered me. I decided to improve the performance by implementing a simple caching strategy.

There were two main issues I wanted to improve.

Issue 1: Preview images would flicker as I was scrolling around

Cause: DropDownList uses a virtual layout by default, I could change useVirtualLayout to false, but that will cause a performance hit when you have lots of items (since every renderer and every image will then be loaded when the DropDownList is opened).

Solution: Keep virtual layout on and cache images as they are loaded.

Issue 2: Re-opening a DropDownList that I had opened before was kind of sluggish

Cause: If you look in the default DropDownListSkin you will see that itemDestructionPolicy on the PopUpAnchor is set to auto. This means that when you close the DropDownList the List gets destroyed and will be re-instantiated the next time you open the DropDownList.

Solution: Set itemDestructionPolicy=”never” on the PopUpAnchor in a custom DropDownList skin.

Here is a sample application that demonstrates the difference in performance before and after implementing these changes. You can see the difference by opening a drop down and scrolling rapidly up and down, and closing and reopening the drop down.

View Source

The caching strategy I used here is very naive, but works pretty well for this data. Each DropDownList is sharing a single dataProvider so if an image is cached in one DropDownList it is available in all. If you have many more items or larger images you will want to be more careful over selecting which items to cache and figuring out when to clear them from the cache.

Images courtesy of DM Toques.

Note: This sample requires Flex SDK 4.0.0.12222 or higher. You can get the latest SDK builds from opensource.adobe.com.

9 thoughts on “Caching images loaded from a spark item renderer”

  1. Nice disclaimer:
    If you have many more items or larger images you will want to be more careful over selecting which items to cache and figuring out when to clear them from the cache.

    Have you figured out any smart new approaches if your fall in to that category.?

  2. @Bjorn – Deciding when to remove an item from a cache is a common problem and there are some commonly used strategies, for example:

    1. Keep track of how often an item has come into view and only remove items from the cache that aren’t viewed very often (Least Frequently Used)
    2. Keep track of the time an item was last in view and…
    – remove the item that hasn’t been viewed for a while (Least Recently Used)
    – remove the item that is currently in view (Most Recently Used)

    In this case deciding which approach to take will likely depend on your data and the tendencies of your users. This post demonstrates a very naive strategy: never remove items from the cache. If there is sufficient interest then I might write another blog post that demonstrates and compares the strategies mentioned above.

    See http://en.wikipedia.org/wiki/Cache_algorithms for more details on caching strategies.

  3. Thanks for this info! For my application I actually needed the useVirtualLayout option, but it was good to see the different approaches. I would be interested in seeing your implementation of the common cache algorithms.

  4. Hey, This is exactly what i am looking for, Saved a lot of time for me. Thanks a ton. Great post!

Comments are closed.