Transcript Performance

Flex Performance Tips & Tricks
Evtim Georgiev | Computer Scientist, Flex SDK | http://evtimmy.com
Steve Shongrunden | Computer Scientist, Flex SDK | http://flexponential.com
© 2011 Adobe Systems Incorporated. All Rights Reserved.
Flex Performance Tips & Tricks

Performance Metrics

From MX to Spark

Item Renderers

MXML Graphics and FXG

Mobile Skins

Q&A
© 2011 Adobe Systems Incorporated. All Rights Reserved.
Performance Metrics
© 2011 Adobe Systems Incorporated. All Rights Reserved.
Performance Metrics

Metrics


Types of Execution Time

Startup / validation time

Frame rate (fps)

Memory

SWF Size
Perceived Performance
© 2011 Adobe Systems Incorporated. All Rights Reserved.
4
Where’s Time Spent?
Critical Areas: Object Creation, Measurement/Layout, Render
Effects,
Scrolling,
Transitions
© 2011 Adobe Systems Incorporated. All Rights Reserved.
Startup,
Navigation,
Data processing
5
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
© 2011 Adobe Systems Incorporated. All Rights Reserved.
From MX to Spark
© 2011 Adobe Systems Incorporated. All Rights Reserved.
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
© 2011 Adobe Systems Incorporated. All Rights Reserved.
More Choices with Spark
Spark
MX
Group
DataGroup
Scroller
SkinnableContainer
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
© 2011 Adobe Systems Incorporated. All Rights Reserved.
Group vs. Container
© 2011 Adobe Systems Incorporated. All Rights Reserved.
10
More Choices with Spark


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
© 2011 Adobe Systems Incorporated. All Rights Reserved.
BitmapImage, Spark Image vs. MX Image
© 2011 Adobe Systems Incorporated. All Rights Reserved.
12
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
© 2011 Adobe Systems Incorporated. All Rights Reserved.
More Choices with Spark
Spark
MX
Label
RichText
RichEditableText
StyleableTextField (New in Flex 4.5)
Label
Text
© 2011 Adobe Systems Incorporated. All Rights Reserved.
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
© 2011 Adobe Systems Incorporated. All Rights Reserved.
15
Spark Text Components

Text performance is very platform dependent

Order of performance

OK: RichEditableText

Better: RichText

Best: Label

Best (for Mobile): StyleableTextField
© 2011 Adobe Systems Incorporated. All Rights Reserved.
16
ItemRenderers
© 2011 Adobe Systems Incorporated. All Rights Reserved.
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
© 2011 Adobe Systems Incorporated. All Rights Reserved.
Optimizing MXML ItemRenderer
© 2011 Adobe Systems Incorporated. All Rights Reserved.
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>
© 2011 Adobe Systems Incorporated. All Rights Reserved.
MXML ItemRenderer, Baseline Numbers
© 2011 Adobe Systems Incorporated. All Rights Reserved.
Replacing RichText with Label
<s:ItemRenderer ...>
<!-- background fill -->
<s:Rect ... />
<!-- bottom separator -->
<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>
© 2011 Adobe Systems Incorporated. All Rights Reserved.
Replacing RichText with Label
© 2011 Adobe Systems Incorporated. All Rights Reserved.
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>
© 2011 Adobe Systems Incorporated. All Rights Reserved.
Adding ContentCache
© 2011 Adobe Systems Incorporated. All Rights Reserved.
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>
© 2011 Adobe Systems Incorporated. All Rights Reserved.
Set “cacheAsBitmap” on the Decorator
© 2011 Adobe Systems Incorporated. All Rights Reserved.
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>
© 2011 Adobe Systems Incorporated. All Rights Reserved.
Set “cacheAsBitmap” and “opaqueBackground” on the
ItemRenderer
© 2011 Adobe Systems Incorporated. All Rights Reserved.
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.
© 2011 Adobe Systems Incorporated. All Rights Reserved.
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>
© 2011 Adobe Systems Incorporated. All Rights Reserved.
IconItemRenderer + “opaqueBackground” and “cacheAsBitmap”
© 2011 Adobe Systems Incorporated. All Rights Reserved.
MXML Graphics and FXG
© 2011 Adobe Systems Incorporated. All Rights Reserved.
UIComponent vs. GraphicElement

UIComponent


Rich feature set

Interactivity

Focus

States

Styles
GraphicElement

Lightweight graphic primitives for drawing
© 2011 Adobe Systems Incorporated. All Rights Reserved.
34
GraphicElements Share DisplayObjects
© 2011 Adobe Systems Incorporated. All Rights Reserved.
35
Initialization Time Comparison
© 2011 Adobe Systems Incorporated. All Rights Reserved.
GraphicElement vs. FXG

GraphicElements


Lightweight graphic primitives
FXG

Static compile-time optimized graphics
© 2011 Adobe Systems Incorporated. All Rights Reserved.
37
Initialization Time Comparison
© 2011 Adobe Systems Incorporated. All Rights Reserved.
Example of GraphicElements in MXML
MainApplication.mxml
<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>
© 2011 Adobe Systems Incorporated. All Rights Reserved.
Example of Compiler Optimized FXG
MainApplication.mxml
MyGraphic.fxg
<s:Application ...
xmlns:assets="*">
<Graphic xmlns="http://ns.adobe.com/fxg/2008">
<Rect width="100" height="100">
<fill>
<SolidColor color="#FF0000" />
</fill>
</Rect>
<s:Button
text="Hello World"
x=“150" />
<assets:MyGraphic />
</s:Application>
<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>
© 2011 Adobe Systems Incorporated. All Rights Reserved.
FXG Scaling Fidelity
JPG
<s:Image source="MyStar.jpg" />
width=50
width=100
width=200
© 2011 Adobe Systems Incorporated. All Rights Reserved.
FXG
<assets:MyStar />
Scale Grid in FXG
Without scale grid
Original Size
Scaled down
Scaled up
<s:Graphic xmlns="http://ns.adobe.com/fxg/2008"
viewWidth="100" viewHeight="60"
scaleGridLeft="20" scaleGridRight="80"
scaleGridTop="20" scaleGridBottom="40">
© 2011 Adobe Systems Incorporated. All Rights Reserved.
With scale grid
Converting from GraphicElement to FXG
FXG:
MXML GraphicElement:
<s:Rect top="0" left="0"
right="0" bottom="0">
<s:fill>
<s:SolidColor color="red” />
</s:fill>
</s:Rect>
<Rect x="0" y="0"
width="100" height="100">
<fill>
<SolidColor color="#FF0000" />
</fill>
</Rect>

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)
© 2011 Adobe Systems Incorporated. All Rights Reserved.
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
© 2011 Adobe Systems Incorporated. All Rights Reserved.
Optimizing Skins
© 2011 Adobe Systems Incorporated. All Rights Reserved.
Mobile Optimized Skins

Larger default size

Different look on different device DPIs

Performance
© 2011 Adobe Systems Incorporated. All Rights Reserved.
Components with Mobile Optimized Skins

Button

CheckBox

RadioButton

HSlider

HScrollbar

VScrollbar

TextInput

TextArea

List

ActionBar

ViewNavigator

…
© 2011 Adobe Systems Incorporated. All Rights Reserved.
How was Performance Optimized?
Desktop Skin
Mobile Skin
MXML (GraphicElements)
FXG
Extends Skin
Extends MobileSkin
Label
StyleableTextField
© 2011 Adobe Systems Incorporated. All Rights Reserved.
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
© 2011 Adobe Systems Incorporated. All Rights Reserved.
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>
© 2011 Adobe Systems Incorporated. All Rights Reserved.
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>
© 2011 Adobe Systems Incorporated. All Rights Reserved.
Splitting GraphicElements Across Two FXG Files
<s:Rect top="0" left="0" right="0" bottom="0">
<s:fill>
<s:SolidColor color.up="red"
color.down="blue" />
</s:fill>
</s:Rect>
...
Button_upState.fxg
Button_downState.fxg
<Rect x="0" y="0" width="100"
height="100">
<fill>
<SolidColor color="#FF0000" />
</fill>
</Rect>
<Rect x="0" y="0" width="100"
height="100">
<fill>
<SolidColor color=”#0000FF" />
</fill>
</Rect>
...
...
© 2011 Adobe Systems Incorporated. All Rights Reserved.
Flash Builder Show State Feature Can Be Useful
© 2011 Adobe Systems Incorporated. All Rights Reserved.
Different FXG Files for Different States
<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>
© 2011 Adobe Systems Incorporated. All Rights Reserved.
Results
© 2011 Adobe Systems Incorporated. All Rights Reserved.
Inheritance of an MXML skin vs. an ActionScript skin
UIComponent
UIComponent
Group
Skin
MXML ButtonSkin
© 2011 Adobe Systems Incorporated. All Rights Reserved.
ActionScript ButtonSkin
New MobileSkin base class introduced in Hero
UIComponent
UIComponent
Group
Skin
MobileSkin
MXML ButtonSkin
ActionScript ButtonSkin
© 2011 Adobe Systems Incorporated. All Rights Reserved.
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
© 2011 Adobe Systems Incorporated. All Rights Reserved.
Extending mobile ButtonSkin
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;
}
}
}
© 2011 Adobe Systems Incorporated. All Rights Reserved.
Results
© 2011 Adobe Systems Incorporated. All Rights Reserved.
Results
© 2011 Adobe Systems Incorporated. All Rights Reserved.
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!)
© 2011 Adobe Systems Incorporated. All Rights Reserved.
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+an
d+Touch
Spark Text

http://opensource.adobe.com/wiki/display/flexsdk/Spark+Text+Primitives
© 2011 Adobe Systems Incorporated. All Rights Reserved.
Q&A
© 2011 Adobe Systems Incorporated. All Rights Reserved.