[Flex] Top 5 memory leaks in Flex, #1: background-image in containers
I know, I’ve been lazy in blogging in the last months, but this is changing now. I was involved in a huge Flex3 project (not allowed to name it right now). The size of the application made it impossible to develop in a classical way, so the team decided the following points:
- Build a own lightweight framework that fits our needs in widget handling
- Build components from scratch by extenting UIComponent and handle the life-cycle by ourselfs
- Do not use flex components if not necessary, this also includes containers, e.g. boxes
- Use MVP Pattern
- CodeBehind Classes for enabling inheritance in MXML
and in general:
- Save performance wherever possible
- Save memory wherever possible
In the end stage of the project we had to deal with several memory leaks, so we started to investigate in this topic. With help of the Flex Builder Profiler (see this link how to use the profile) we could identify the leaks and solve most of them. This and following posts point out the top 5 memory leaks, starting with the most common leak we had.
background-image in containers
Issue: Background image stays in memory after removing container from display list
Tested version: Flex Milestone 3.2
Workaround: Clear the style by yourself
Note: See the example how to clear the style exactly. Choose any background image you like. This also works with every container not just Canvas, e.g HBox, VBox,..
Adobe Bug: SDK-1893
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute” width=”400″ height=”350″ >
<mx:Script>
<![CDATA[
private function remove():void
{
//has no effect
//myCanvas.clearStyle("background-image");
//myCanvas.clearStyle("backroundImage");
//myCanvas.setStyle("background-image",null);
//works
myCanvas.setStyle("backgroundImage",null);
removeChild(myCanvas);
}
]]>
</mx:Script>
<mx:Style>
.myCanvas
{
background-image: Embed(source=”bgImage.jpg”);
}
</mx:Style>
<mx:Button label=”Remove canvas” click=”remove()” />
<mx:Canvas id=”myCanvas” width=”400″ height=”300″ y=”50″ styleName=”myCanvas” horizontalScrollPolicy=”off” verticalScrollPolicy=”off” />
</mx:Application>
Tags: background image, CodeBehind, container, Flex, flex builder profiler, garbage collector, lightweight, memory leak, UIComponent
firstrow RIA e.U.
Hi there
I know this is very old, but I’d still be interested to find out whether you found the same issue for borderSkin
For components I never use the backgroundImage skin attribute but I *extensively* use the borderSkin attribute … and it would be bad for our app if there was a memory leak in this case.
Hi Tracy,
unfortunately this leak exists with every skin, borderSkin is no exception there. Just set the styleName property to null and all skins are cleaned up by the GC on the next cycle.
Additionally you also have to set the instance to null, otherwise the skins are gone but the instance itself isn’t.