Reducing CPU usage in Adobe AIR

Let's be honest. AIR gets a bad rap for being a bloated runtime, using up a lot of precious memory and CPU. Although a lot of AIR applications seem to fall into this trap, it doesn't have to be this way. There are a number of techniques you can use to develop a lightweight application that rivals native programs in terms of performance.

One simple and easy way to drastically reduce CPU usage is through framerate throttling. In this article, I will explain what framerate throttling is and how best to implement it in your application.

Note: To make the most of this article, you should have general knowledge of ActionScript and AIR application development.

What is framerate throttling?

Framerate throttling is the technique of controlling an application's framerate to increase performance when in use and reduce resource usage when idle. As of ActionScript 3, developers have an extremely useful property in their possession—Stage.frameRate. This gem lets you change the framerate on the fly. In previous versions of ActionScript, we were stuck with what we set it to in the IDE. Thankfully, times have changed and there's no longer an excuse for processor-heavy applications lingering in the background.

How do you implement framerate throttling?

Since framerate throttling is essentially a matter of setting the Stage.frameRate property to a lower or higher value, it's up to the developer to decide how involved or advanced it will be. It also depends on the application itself—some allow for more integration than others.

Note: The performance results in the following examples are done on a Macbook Pro 2.8 GHz Intel Core 2 Duo. Since CPU usage is in terms of percent, results will vary from computer to computer.

Novice

The rawest form of throttling is by using the NativeApplication Event.ACTIVATE and Event.DEACTIVATE events—increase the framerate when active, decrease it when inactive. With a single blank window, this results in 1.8% CPU usage when active and .4% when inactive. You can actually set the framerate to .01 on deactivate for .2% usage, but in testing I discovered the window chrome never loses focus.

package { import flash.desktop.NativeApplication; import flash.display.Sprite; import flash.events.Event; public class Application extends Sprite { public function Application () { __init (); } private function __init ():void { NativeApplication.nativeApplication.addEventListener (Event.ACTIVATE, __activate__); NativeApplication.nativeApplication.addEventListener (Event.DEACTIVATE, __deactivate__); } private function __activate__ ($event:Event):void { stage.frameRate = 50; } private function __deactivate__ ($event:Event):void { stage.frameRate = 1; } } }

Intermediate

Certain applications allow more advanced framerate throttling—for example, an application that still needs a level of interaction, even when in the background. Let's say your application has scrollable content to reference and since AIR allows mouse wheel scrolling while in a different application, you need a higher framerate at that time.

In this example, if the application is in the background, but the mouse wheel is scrolling, the MouseEvent.MOUSE_WHEEL handler increases the framerate and sets up an Event.ENTER_FRAME event that will reduce the framerate half a second after scrolling. In cases like these, it's best to have a buffer in place, so you won't change the framerate with every scroll, but also because there's no event for when the mouse wheel is idle.

package { import flash.desktop.NativeApplication; import flash.display.Sprite; import flash.events.Event; import flash.events.MouseEvent; import flash.utils.getTimer; public class Application extends Sprite { public static const ACTIVE:int = 50; public static const INACTIVE:int = 1; public var active:Boolean; public var scrolling:Boolean; public var buffer:int; public function Application () { __init (); } private function __init ():void { NativeApplication.nativeApplication.addEventListener (Event.ACTIVATE, __activate__); NativeApplication.nativeApplication.addEventListener (Event.DEACTIVATE, __deactivate__); stage.addEventListener (MouseEvent.MOUSE_WHEEL, __mouseWheel__); } private function __activate__ ($event:Event):void { active = true; stage.frameRate = ACTIVE; } private function __deactivate__ ($event:Event):void { active = false; stage.frameRate = INACTIVE; } private function __mouseWheel__ ($event:MouseEvent):void { if (!active) { if (!scrolling) { stage.addEventListener (Event.ENTER_FRAME, __enterframe__); } stage.frameRate = ACTIVE; scrolling = true; buffer = getTimer () + 500; } } private function __enterframe__ ($event:Event):void { if (buffer < getTimer ()) { stage.frameRate = INACTIVE; scrolling = false; stage.removeEventListener (Event.ENTER_FRAME, __enterframe__); } } } }

Expert

If performance optimization is what you live for, you can impress your friends with some intricate framerate throttling. (Note: This won't impress girlfriends.)

In my applications, I like to have transitions from one state to the next for both a smoother environment and a better feel. Because of this, I like to use a high framerate (50). Unfortunately, the higher the framerate, the higher the CPU usage. Therefore, I set the framerate to 50 only when a tween is active. When one isn't, I reduce the framerate to 24. On top of that, there are instances when a loader is animating while the application is in the background. A loader doesn't need 50 fps, so I'll set the framerate to 5 when the application is visible in the background and 1 when not visible.

Note: For this example, I'm using an animate() method to call at the beginning of each tween. Ideally, you would want to build the framerate throttler into your tweening engine, so you wouldn't need to call animate() manually.

package { import flash.desktop.NativeApplication; import flash.display.Sprite; import flash.events.Event; import flash.utils.getTimer; public class Application extends Sprite { public static const ANIMATING:int = 50; public static const ACTIVE:int = 24; public static const INACTIVE_VISIBLE:int = 5; public static const INACTIVE_INVISIBLE:int = 1; public var active:Boolean; public var animating:Boolean; public var buffer:int; public function Application () { __init (); } private function __init ():void { NativeApplication.nativeApplication.addEventListener (Event.ACTIVATE, __activate__); NativeApplication.nativeApplication.addEventListener (Event.DEACTIVATE, __deactivate__); } public function activate ():void { if (!animating) { stage.frameRate = ACTIVE; } } public function deactivate ():void { if (!animating) { stage.frameRate = (stage.nativeWindow.visible) ? INACTIVE_VISIBLE : INACTIVE_INVISIBLE; } } public function animate ($duration:int = 1000):void { stage.frameRate = 50; buffer = getTimer () + $duration; animating = true; if (!animating) { stage.addEventListener (Event.ENTER_FRAME, __checkBuffer__); } } private function __activate__ ($event:Event):void { active = true; activate (); } private function __deactivate__ ($event:Event):void { active = false; deactivate (); } private function __checkBuffer__ ($event:Event):void { if (buffer < getTimer ()) { stage.removeEventListener (Event.ENTER_FRAME, __checkBuffer__); animating = false; if (active) { activate (); } else { deactivate (); } } } } }

Framerate throttling is a small chapter in the optimization of your AIR application's performance. It's a basic way to get your foot in the door and in the mindset of keeping resource usage low. This mentality and practice can easily lead to more responsive applications that enhance the user's experience while leaving a light footprint. Let's face it—no one likes bloatware.

http://www.adobe.com/devnet/air/flex/articles/framerate_throttling.html