© 2011 Adobe Systems Incorporated. All Rights Reserved. Flex Performance Tips & Tricks Evtim Georgiev | Computer Scientist, Flex SDK |

© 2011 Adobe Systems Incorporated. All Rights Reserved.

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

Steve 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%

Render67%

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 MX

Group 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 MX

BitmapImage 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 MX

Label 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 14

123.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 20

12

17.5

3.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 25

12

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 25

12

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 40

12

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 45

12

17.5

20

23

30.5

36

3.5

7

20

23

34.5

40

Scrolling



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 Skin

MXML (GraphicElements) FXG

Extends Skin Extends MobileSkin

Label 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="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="border" left="0" right="0" radiusX="2" />

<s:Label id="labelDisplay" />


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" ... />


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_1288211035765KTXV

IconItemRenderer and LabelItemRenderer

Jason Hanson’s session “Deep Dive into Flex Mobile Item Renderers”

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

Spark Text

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



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

© 2011 Adobe Systems Incorporated. All Rights Reserved. Flex Performance Tips & Tricks Evtim Georgiev | Computer Scientist, Flex SDK |