© 2011 adobe systems incorporated. all rights reserved. flex performance tips & tricks evtim...
TRANSCRIPT
© 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
© 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
Metrics Types of Execution Time
Startup / validation time
Frame rate (fps)
Memory
SWF Size
Perceived Performance
4
© 2011 Adobe Systems Incorporated. All Rights Reserved.
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%
© 2011 Adobe Systems Incorporated. All Rights Reserved.
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
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 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
© 2011 Adobe Systems Incorporated. All Rights Reserved.
Group vs. Container
10
Container
Group
0 200 400 600 800 1000 1200 1400 1600
Create and Render 1000 Instances
CreationValidationRender
Time (ms)
© 2011 Adobe Systems Incorporated. All Rights Reserved.
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
12
Spark Image
MX Image
BitmapImage
0 500 1000 1500 2000 2500 3000 3500
Create and Render 1000 Instances
CreationValidationRender
Time (ms)
© 2011 Adobe Systems Incorporated. All Rights Reserved.
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)
LabelText
© 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
15
© 2011 Adobe Systems Incorporated. All Rights Reserved.
Spark Text Components
Text performance is very platform dependent
Order of performance OK: RichEditableText
Better: RichText
Best: Label
Best (for Mobile): StyleableTextField
16
© 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
<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
RichText
0 2 4 6 8 10 12 14
123.5
Scrolling
Large ThrowItem Scroll Frames per Second
© 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
RichText
Label
0 2 4 6 8 10 12 14 16 18 20
12
17.5
3.5
7
Scrolling
Large ThrowItem Scroll Frames per Second
© 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
RichText
Label
ContentCache
0 5 10 15 20 25
12
17.5
20
3.5
7
20
Scrolling
Large ThrowItem Scroll Frames per Second
© 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
RichText
Label
ContentCache
CAB decorator
0 5 10 15 20 25
12
17.5
20
23
3.5
7
20
23
Scrolling
Large ThrowItem Scroll Frames per Second
© 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
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
Large ThrowItem Scroll Frames per Second
© 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”
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
Large ThrowItem Scroll Frames per Second
© 2011 Adobe Systems Incorporated. All Rights Reserved.
UIComponent vs. GraphicElement
UIComponent
Rich feature set
Interactivity
Focus
States
Styles
GraphicElement
Lightweight graphic primitives for drawing
34
© 2011 Adobe Systems Incorporated. All Rights Reserved.
Initialization Time Comparison
UIComponents
GraphicElements
0 100 200 300 400 500 600 700
Create and Render 1000 Rectangles
CreationValidationRender
Time (ms)
© 2011 Adobe Systems Incorporated. All Rights Reserved.
GraphicElement vs. FXG
GraphicElements
Lightweight graphic primitives
FXG
Static compile-time optimized graphics
37
© 2011 Adobe Systems Incorporated. All Rights Reserved.
Initialization Time Comparison
UIComponents
GraphicElements
Compiled FXG
0 100 200 300 400 500 600 700
Create and Render 1000 Rectangles
CreationValidationRender
Time (ms)
© 2011 Adobe Systems Incorporated. All Rights Reserved.
<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
© 2011 Adobe Systems Incorporated. All Rights Reserved.
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
© 2011 Adobe Systems Incorporated. All Rights Reserved.
JPG<s:Image source="MyStar.jpg" />
width=50
FXG Scaling Fidelity
width=100
width=200
FXG<assets:MyStar />
© 2011 Adobe Systems Incorporated. All Rights Reserved.
<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
© 2011 Adobe Systems Incorporated. All Rights Reserved.
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:
© 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.
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.
<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
© 2011 Adobe Systems Incorporated. All Rights Reserved.
<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
© 2011 Adobe Systems Incorporated. All Rights Reserved.
<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
© 2011 Adobe Systems Incorporated. All Rights Reserved.
Flash Builder Show State Feature Can Be Useful
© 2011 Adobe Systems Incorporated. All Rights Reserved.
<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
© 2011 Adobe Systems Incorporated. All Rights Reserved.
Results
Original
FXG
0 500 1000 1500 2000 2500
2232
1846
Create and Render 100 Buttons on a Mobile Device
Time (ms)
© 2011 Adobe Systems Incorporated. All Rights Reserved.
Inheritance of an MXML skin vs. an ActionScript skin
UIComponent
Group
Skin
MXML ButtonSkin
UIComponent
ActionScript ButtonSkin
© 2011 Adobe Systems Incorporated. All Rights Reserved.
New MobileSkin base class introduced in Hero
UIComponent
Group
Skin
MXML ButtonSkin
UIComponent
ActionScript ButtonSkin
MobileSkin
© 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.
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
© 2011 Adobe Systems Incorporated. All Rights Reserved.
Results
Original
FXG
FXG + AS
0 500 1000 1500 2000 2500
2232
1846
1565
Create and Render 100 Buttons on a Mobile Device
Time (ms)
© 2011 Adobe Systems Incorporated. All Rights Reserved.
Results
Original
FXG
FXG + AS
Mobile skin
0 500 1000 1500 2000 2500
2232
1846
1565
1517
Create and Render 100 Buttons on a Mobile Device
Time (ms)
© 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+and+Touch
Spark Text
http://opensource.adobe.com/wiki/display/flexsdk/Spark+Text+Primitives