Adobe AIR HTML Control, Flash Content and Garbage Collection

February 24, 2009 | By

For the past few days, I’ve been trying to figure out why Tour de Flex’s memory and CPU utilization increases every time a new sample is viewed.  Today, I had a breakthrough that explains the bloat and a simple workaround:

Summary:  If an mx:HTML control loads a page with flash content, the control cannot be freed, even if you remove it from the container, de-reference the object, etc.  The flash content continues to play!  However, if you first set the control’s htmlText attribute to an empty string (“”), it will be garbage collected as expected.

Below is my evidence.

Here’s my test code:

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" width="800" height="600">
<mx:Script>
	public function killIt():void {

		//browser.htmlText = "";	commented out for the 1st profiler graph below.

		this.removeChild(browser);
		browser = new HTML();
		browser.location = "http://www.youtube.com/watch?v=d8Vw5r7-vgs";
		this.addChild(browser);
	}
</mx:Script>
<mx:HTML id="browser" location="http://www.youtube.com/watch?v=d8Vw5r7-vgs" width="100%" height="100%" />
<mx:Button label="Kill the HTML control" click="killIt()"/>
</mx:WindowedApplication>

The code displays a simple HTML control that loads a YouTube page.  When you click the button, the HTML control is removed from the container, recreated and set to the YouTube page again.  The original object is de-referenced and replaced by the new one so the old one should get garbage collected… that’s how I expect it to work anyways.  However, you can hear the original video playing in the background AND the newly loaded video playing at the same time.  If you click the button a few more times, things get a little crazy sounding! (my apologies to Kenny Drew Jr.!).

When I do this with the profiler running, I get the following:

Notice that each time I click the button creating a new HTML control, the memory consumption increases.

However, if I un-comment the line that reads, browser.htmlText = “”, I get very different results.  I only hear the latest YouTube page as expected, but I also see garbage collection doing what I originally expected it to do:

So, my conclusion is that if the HTML control has loaded a page with Flash content, the resources are not released and the Flash content continues despite my previous efforts.  However, if I simply turn off the Flash content by giving it an empty string to load, everything works nicely.

In Tour de Flex, each sample is a simple HTML wrapper with a SWF.  Therefore, if you view 50 samples, all 50 SWFs retain their resources until you quit the AIR application, so you eventually start having issues.  By adding a single line of code, things are much better.   We will be posting a new version of Tour de Flex in a few days with this fix and many other goodies.

If you have seen different results or if you have a better workaround, let me know!

Filed in: Adobe AIR, Adobe Flex | Tags: , , ,

About the Author (Author Profile)

Greg is an Adobe Creative Cloud Evangelist based in Tampa, Florida