Flex Performance Tips & Tricks

© 2011 Adobe Systems Incorporated. All Rights Reserved.

Flex Performance Tips & TricksEvtim Georgiev | Computer Scientist, Flex SDK | http://evtimmy.comSteve Shongrunden | Computer Scientist, Flex SDK | http://flexponential.com


Flex Performance Tips & Tricks

Performance Metrics From MX to Spark Item Renderers MXML Graphics and FXG Mobile Skins Q & A


Performance Metrics


Performance Metrics

Metrics Types of Execution Time

Startup / validation time Frame rate (fps)

Memory SWF Size

Perceived Performance

4


Where’s Time Spent?

Other10%

Action Script23% Render

67%

5

Effects, Scrolling,

Transitions

Startup, Navigation,

Data processing

Critical Areas: Object Creation, Measurement/Layout, Render R

ender

67%

Other16%

Action Script60%


Rules of Thumb

Use the best component for the job Cache and queue external content Set cacheAsBitmap on graphics that change

infrequently but redraw often


From MX to Spark


From MX to Spark

MX Rich components Lightweight skins, styles

Spark introduces new component model Declarative Skins - rich, toolable, extreme customization but heavier

than MX Lightweight graphic primitives (MXML Graphics) Lighter-weight modularized components


More Choices with Spark

Spark MXGroup DataGroupScrollerSkinnableContainer

Container

Types of Groups Group – a generic container + MXML Graphics support DataGroup – ItemRenderers + virtualization

Groups are lighter than Containers No built-in scrolling Chromeless Clipping is off by default


Group vs. Container

10

Container

Group

0 200 400 600 800 1000 1200 1400 1600

Create and Render 1000 Instances

CreationValidationRender

Time (ms)



Spark MXBitmapImage Image

Image

BitmapImage GraphicElement Remote loading, scaling and Caching (Flex 4.5)

Spark Image (Flex 4.5) Skinnable component Uses BitmapImage Progress, broken icon, chrome


BitmapImage, Spark Image vs. MX Image

12

Spark Image

MX Image

BitmapImage

0 500 1000 1500 2000 2500 3000 3500

Create and Render 1000 Instances


Time (ms)


Spark Image and BitmapImage Tips

Caching and Queuing (New in Flex 4.5) ContentCache class

Cache on by default Queue off by default

contentLoader property on Spark Image, BitmapImage IContentLoader interface

Use PNGs Avoid runtime scaling



Spark MXLabel RichText RichEditableText StyleableTextField (New in Flex 4.5)

LabelText


Spark Text Components

Label Single-styled Can use in Mobile for static text

RichText Multi-styled

RichEditableText Selection, edit Used by TextInput and TextArea in non-Mobile projects

StyleableTextField (New in Flex 4.5) Mobile support for edit and selection (turn off if not needed!) Used by TextInput and TextArea in Mobile projects Can’t use directly in MXML

15


Spark Text Components

Text performance is very platform dependent Order of performance

OK: RichEditableText Better: RichText Best: Label Best (for Mobile): StyleableTextField

16


ItemRenderers


ItemRenderers in Spark

Creating ItemRenderers in MXML is quick and simple Avoid creating heavy ItemRenderers

Don’t use heavy (text) components Cache and queue external content requests Use cacheAsBitmap (carefully!) Turn off “autoDrawBackground” if not needed Filters / drop shadows Avoid complex binding expressions Reduce number of nested Groups Beware itemRendererFunction since it prevents renderer recycling

For Mobile - uber-optimized IconItemRenderer and LabelItemRenderer


Optimizing MXML ItemRenderer

19


Optimizing MXML ItemRenderer

<s:ItemRenderer ...> <s:Rect left="0" right="0" top="0" bottom="0"> <s:fill> <s:SolidColor color="0" alpha="0"/></s:fill> </s:Rect> <s:Line left="0" right="0" bottom="0" height="0"> <s:stroke><s:SolidColorStroke .../></s:stroke> </s:Line> <s:HGroup verticalAlign="middle" left="15" right="15" top="0" bottom="0" gap="10”> <s:BitmapImage id="icon" source="{data.graphic}” ... /> <s:VGroup width="100%" height="100%" gap="12” ...> <s:RichText width="100%" text="{data.callLetters}"/> <s:RichText width="100%" text="{data.name}” .../> </s:Vgroup> <assets:Chevron/> </s:Hgroup></s:ItemRenderer>


MXML ItemRenderer, Baseline Numbers

RichText

0 2 4 6 8 10 12 14123.5

Scrolling

Large ThrowItem Scroll Frames per Second


Replacing RichText with Label

<s:ItemRenderer ...>  <s:Rect ... />  <s:Line ... /> <s:HGroup ...>

<s:BitmapImage .../> <s:VGroup ...> <s:Label width="100%" text="{data.callLetters}"/> <s:Label width="100%" text="{data.name}” .../> </s:VGroup> <assets:Chevron/> </s:Hgroup> </s:ItemRenderer>


Replacing RichText with Label

RichText

Label

0 2 4 6 8 10 12 14 16 18 2012

17.53.5

7

Scrolling



Adding ContentCache

<s:ItemRenderer ...> <fx:Script> <![CDATA[ import spark.core.ContentCache; static public const s_imageCache:ContentCache = new ContentCache();

]]> </fx:Script>

<s:Rect ... <s:Line ... <s:HGroup ...> <s:BitmapImage id="icon" source="{data.graphic}” contentLoader="{s_imageCache}"/> <s:VGroup ...> <s:Label .../> <s:Label ... /> </s:Vgroup> <assets:Chevron/> </s:Hgroup></s:ItemRenderer>


Adding ContentCache

RichText

Label

ContentCache

0 5 10 15 20 2512

17.5

20

3.5

7

20

Scrolling



Set “caheAsBitmap” on the Decorator

<s:ItemRenderer ...> <fx:Script> <![CDATA[ ... ]]> </fx:Script>

<s:Rect ... <s:Line ... <s:HGroup ...> <s:BitmapImage .../> <s:VGroup ...> <s:Label .../> <s:Label ... /> </s:VGroup> <assets:Chevron cacheAsBitmap="true"/> </s:HGroup> </s:ItemRenderer>


Set “cacheAsBitmap” on the Decorator

RichText

Label

ContentCache

CAB decorator

0 5 10 15 20 2512

17.5

20

23

3.5

7

20

23

Scrolling



Set “cacheAsBitmap” and “opaqueBackground” on the ItemRenderer

<s:ItemRenderer ... opaqueBackground="0xFFFFFF” cacheAsBitmap="true"> <fx:Script> <![CDATA[ ... ]]> </fx:Script>

<s:Rect ... <s:Line ... <s:HGroup ...> <s:BitmapImage .../> <s:VGroup ...> <s:Label .../> <s:Label ... /> </s:VGroup> <assets:Chevron .../> </s:HGroup> </s:ItemRenderer>


Set “cacheAsBitmap” and “opaqueBackground” on the ItemRenderer

RichText

Label

ContentCache

CAB decorator

CAB + opaqueBackground

0 5 10 15 20 25 30 35 4012

17.5

20

23

30.5

3.5

7

20

23

34.5

Scrolling



IconItemRenderer and LabelItemRenderer

Optimized for Mobile Use StylableTextField Lightweight layout Add more sophisticated ContentCache management

Configurable Use styles, properties to control the layout, text, etc.

Extensible Sub-class to tweak layout, parts, etc.


IconItemRenderer + “opaqueBackground” and “cacheAsBitmap”

<s:List ...> <s:itemRenderer> <fx:Component> <s:IconItemRenderer labelField="callLetters" messageField="name" iconField="graphic" iconWidth="48" iconHeight="48" decorator="{assets.Chevron}” opaqueBackground="0xFFFFFF" cacheAsBitmap="true"> <fx:Script> <![CDATA[ import assets.Chevron; ]]> </fx:Script>

</s:IconItemRenderer> </fx:Component> </s:itemRenderer></s:List>


IconItemRenderer + “opaqueBackground” and “cacheAsBitmap”

RichText

Label

ContentCache

CAB decorator

CAB + opaqueBackground

IconItemRenderer

0 5 10 15 20 25 30 35 40 4512

17.5

20

23

30.5

36

3.5

7

20

23

34.5

40Scrolling



MXML Graphics and FXG


UIComponent vs. GraphicElement

UIComponent Rich feature set

Interactivity Focus States Styles

GraphicElement Lightweight graphic primitives for drawing

34


GraphicElements Share DisplayObjects

35


Initialization Time Comparison

UIComponents

GraphicElements

0 100 200 300 400 500 600 700

Create and Render 1000 Rectangles


Time (ms)


GraphicElement vs. FXG

GraphicElements Lightweight graphic primitives

FXG Static compile-time optimized graphics

37


Initialization Time Comparison

UIComponents

GraphicElements

Compiled FXG

0 100 200 300 400 500 600 700

Create and Render 1000 Rectangles


Time (ms)


<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"> <s:Button text="Hello World" x="150"/> <s:Rect id="myRect1" width="100" height="100"> <s:fill><s:SolidColor color="#FF0000" /></s:fill> </s:Rect> <s:Rect id="myRect2" width="100" height="100" x="20" y="20"> <s:fill><s:SolidColor color="#00FF00" /></s:fill> </s:Rect> <s:Rect id="myRect3" width="100" height="100" x=”40" y=”40"> <s:fill><s:SolidColor color="#0000FF" /></s:fill> </s:Rect> </s:Application>

MainApplication.mxml

Example of GraphicElements in MXML


Example of Compiler Optimized FXG

<s:Application ... xmlns:assets="*"> <s:Button text="Hello World" x=“150" /> <assets:MyGraphic /> </s:Application>

MainApplication.mxml <Graphic xmlns="http://ns.adobe.com/fxg/2008">

<Rect width="100" height="100"> <fill> <SolidColor color="#FF0000" /> </fill> </Rect> <Rect width="100” ... x="20" y="20"> <fill> <SolidColor color="#00FF00" /> </fill> </Rect> <Rect width="100" ... x="20" y="20"> <fill> <SolidColor color="#0000FF" /> </fill> </Rect></Graphic>

MyGraphic.fxg


JPG<s:Image source="MyStar.jpg" />

width=50

FXG Scaling Fidelity

width=100

width=200

FXG<assets:MyStar />


<s:Graphic xmlns="http://ns.adobe.com/fxg/2008" viewWidth="100" viewHeight="60" scaleGridLeft="20" scaleGridRight="80" scaleGridTop="20" scaleGridBottom="40">

Scale Grid in FXG

Original Size

Scaled down

Scaled up

Without scale grid With scale grid


Converting from GraphicElement to FXG

Create .fxg file and copy the shape Change to the FXG namespace Change color values from “0xFF0000” or “red” to “#FF0000” Convert constraints to absolute values Specify scale grid properties correctly (if desired)

<Rect x="0" y="0" width="100" height="100"> <fill> <SolidColor color="#FF0000" /> </fill></Rect>

FXG:<s:Rect top="0" left="0" right="0" bottom="0"> <s:fill> <s:SolidColor color="red” /> </s:fill></s:Rect>

MXML GraphicElement:


Tips on Working with FXG

Incorrect scale grid settings can lead to artifacts Avoid elements positioned in negative space Avoid elements positioned outside the viewWidth / viewHeight Must not overlap Set alpha on fill/stroke instead of on the shape

Avoid strokes Paths sometimes render with less anti-aliasing FXG Group is not the Spark Group


Optimizing Skins


Mobile Optimized Skins

Larger default size Different look on different device DPIs Performance


Components with Mobile Optimized Skins

Button CheckBox RadioButton HSlider HScrollbar VScrollbar TextInput TextArea List ActionBar ViewNavigator …


How was Performance Optimized?

Desktop Skin Mobile SkinMXML (GraphicElements) FXGExtends Skin Extends MobileSkinLabel StyleableTextField


Optimizing a Custom MXML Button Skin

Convert MXML GraphicElements to FXG files Convert from MXML extending Skin to ActionScript extending

MobileSkin ButtonSkin uses StyleableTextField instead of Label

Same process can be applied to other skins


<s:SparkButtonSkin ... alpha.disabled="0.5">

<s:Rect id="shadow" radiusX.down=“0" radiusX.up=“5" /> <s:Rect id="fill" left="1" right="1" top="1" radiusX="2" /> <s:Rect id="lowlight" left="1" right="1" top="1" radiusX="2" /> <s:Rect id="highlight" left="1" right="1" top="1" radiusX="2" /> <s:Rect id="highlightStroke" left="1" excludeFrom="down" /> <s:Rect id="hldownstroke1" left="1" includeIn="down" /> <s:Rect id="hldownstroke2" left="2" includeIn="down" /> <s:Rect id="border" left="0" right="0" radiusX="2" />

<s:Label id="labelDisplay" />

</s:SparkButtonSkin>

Un-optimized Button Skin


<s:SparkButtonSkin ... alpha.disabled="0.5">

<s:Rect id="shadow" radiusX.down=“0" radiusX.up=“5" /> <s:Rect id="fill" left="1" right="1" top="1" radiusX="2" /> <s:Rect id="lowlight" left="1" right="1" top="1" radiusX="2" /> <s:Rect id="highlight" left="1" right="1" top="1" radiusX="2" /> <s:Rect id="highlightStroke" left="1" excludeFrom="down" /> <s:Rect id="hldownstroke1" left="1" includeIn="down" /> <s:Rect id="hldownstroke2" left="2" includeIn="down" /> <s:Rect id="border" left="0" right="0" radiusX="2" />

<s:Label id="labelDisplay" />

</s:SparkButtonSkin>

Un-optimized Button Skin


<s:Rect top="0" left="0" right="0" bottom="0"> <s:fill> <s:SolidColor color.up="red" color.down="blue" /> </s:fill></s:Rect>...

Splitting GraphicElements Across Two FXG Files

<Rect x="0" y="0" width="100" height="100"> <fill> <SolidColor color="#FF0000" /> </fill></Rect>...

Button_upState.fxg<Rect x="0" y="0" width="100" height="100"> <fill> <SolidColor color=”#0000FF" /> </fill></Rect>...

Button_downState.fxg


Flash Builder Show State Feature Can Be Useful


<s:SparkButtonSkin … xmlns:skins="skins.*" alpha.disabled="0.5”> <s:states> <s:State name="up" /> <s:State name="down" /> <s:State name="over" /> <s:State name="disabled" /> </s:states> <skins:Button_upState width="100%" height="100%" includeIn="up"/> <skins:Button_downState width="100%" height="100%" includeIn="down"/> <s:Label id="labelDisplay" ... /> </s:SparkButtonSkin>

Different FXG Files for Different States


Results

Original

FXG

0 500 1000 1500 2000 2500

2232

1846

Create and Render 100 Buttons on a Mobile Device

Time (ms)


Inheritance of an MXML skin vs. an ActionScript skin

UIComponent

Group

Skin

MXML ButtonSkin

UIComponent

ActionScript ButtonSkin


New MobileSkin base class introduced in Hero

UIComponent

Group

Skin

MXML ButtonSkin

UIComponent

ActionScript ButtonSkin

MobileSkin


MobileSkin Base Class

Helper methods to size and position elements setElementSize() setElementPosition()

Skin states are handled procedurally commitCurrentState()

Ability to use StyleableTextField No support for some styles

rollOverColor borderAlpha, borderColor, cornerRadius dropShadowVisible

Removes state transition support


package skins{ import spark.skins.mobile.ButtonSkin; import skins.Button_up; import skins.Button_down; public class MyButtonSkin extends ButtonSkin { public function MyButtonSkin() { super(); upBorderSkin = skins.Button_up; downBorderSkin = skins.Button_down; } }}

Extending mobile ButtonSkin


Results

Original

FXG

FXG + AS

0 500 1000 1500 2000 2500

2232

1846

1565


Time (ms)


Results

Original

FXG

FXG + AS

Mobile skin

0 500 1000 1500 2000 2500

2232

1846

1565

1517


Time (ms)


Summary

Converting GraphicElements to FXG can save 18% Extending MobileSkin can save an additional 12% 30% faster skin creation times Your mileage may vary Measure in release (both swf & runtime!)


More Resources

General Performance Tips from Adobe MAX 2010 http://2010.max.adobe.com/online/2010/MAX232_1288211035765KT

XV IconItemRenderer and LabelItemRenderer

Jason Hanson’s session “Deep Dive into Flex Mobile Item Renderers” http://opensource.adobe.com/wiki/display/flexsdk/Mobile+List%2C+S

croller+and+Touch Spark Text

http://opensource.adobe.com/wiki/display/flexsdk/Spark+Text+Primitives

http://2010.max.adobe.com/online/2010/MAX232_1288211035765KTXV

http://2010.max.adobe.com/online/2010/MAX232_1288211035765KTXV

http://opensource.adobe.com/wiki/display/flexsdk/Mobile+List,+Scroller+and+Touch

http://opensource.adobe.com/wiki/display/flexsdk/Mobile+List,+Scroller+and+Touch




Q&A

Documents

Flex Performance Tips & Tricks