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.