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.
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 188.8.131.5222 or higher. You can get the latest SDK builds from opensource.adobe.com.