Flex Performance Tips & Tricks

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

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

Performance Metrics

Metrics Types of Execution Time

Startup / validation time Frame rate (fps)

Memory SWF Size

Perceived Performance

Where’s Time Spent?

Other10%

Action Script23% Render

Effects, Scrolling,

Transitions

Startup, Navigation,

Data processing

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

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

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

Container

0 200 400 600 800 1000 1200 1400 1600

Create and Render 1000 Instances

CreationValidationRender

Time (ms)

Spark MXBitmapImage 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

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

Spark Text Components

Text performance is very platform dependent Order of performance

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

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

<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

0 2 4 6 8 10 12 14 16 18 2012

17.53.5

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

ContentCache

0 5 10 15 20 2512

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

ContentCache

CAB decorator

0 5 10 15 20 2512

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

ContentCache

CAB decorator

CAB + opaqueBackground

0 5 10 15 20 25 30 35 4012

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

ContentCache

CAB decorator

CAB + opaqueBackground

IconItemRenderer

0 5 10 15 20 25 30 35 40 4512

40Scrolling

MXML Graphics and FXG

UIComponent vs. GraphicElement

UIComponent Rich feature set

Interactivity Focus States Styles

GraphicElement Lightweight graphic primitives for drawing

GraphicElements Share DisplayObjects

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

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

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)

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

0 500 1000 1500 2000 2500

Create and Render 100 Buttons on a Mobile Device

Time (ms)

Inheritance of an MXML skin vs. an ActionScript skin

UIComponent

MXML ButtonSkin

UIComponent

ActionScript ButtonSkin

New MobileSkin base class introduced in Hero

UIComponent

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 + AS

0 500 1000 1500 2000 2500

Time (ms)

Results

Original

FXG + AS

Mobile skin

0 500 1000 1500 2000 2500

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

Flex Performance Tips & Tricks

Documents

Tips Tricks

Windows Tips & Tricks

Tips tricks sept17

3V Tips ‘n Tricks CHAPTER 8 3V Tips ‘n Tricks - Ningapi.ning.com/.../3.3Vtipsandtricksen026368.pdf · 3V Tips ‘n Tricks Table Of Contents TIPS ‘N TRICKS INTRODUCTION TIP #1:

Schema Tricks & Tips

Flex 4 tips

Ansible tips & tricks

Melaleuca Tips Tricks

Excel Tips & Tricks

05 Tips Tricks

Tricks & Tips

Tips and Tricks in Laparoscopic Urology - The Eyethe-eye.eu/public/WorldTracker.org/Medical/Tips & Tricks In Laproscopic... · These “tips and tricks” ... 4 Tips and Tricks in

Selenium Tips & Tricks

Laparoscopic Tips and Tricks: Advancing Your Skills (Didactic) · Laparoscopic Tips and Tricks: Advancing ... Laparoscopic Tips and Tricks: Advancing Your Skills (Didactic ... –

Rogers: Tips and Tricks for Alma Analytics Tips and Tricks

S5704A Tips & Tricks 11 © 1999 Microchip Technology Incorporated. All Rights Reserved. S5704A Tips & Tricks 11 Tips and Tricks Tips and Tricks Using PICmicro

Tips ‘n Tricks - Microchip Technologyww1.microchip.com/downloads/en/DeviceDoc/40040C.pdfTips ‘n Tricks ® Tips ‘n Tricks) Tips ‘n Tricks + _ +-. . . A. Microchip ® Microchip

Argos Tips & Tricks - Evisionsgo.evisions.com/hubfs/CoHEsion Louisville Session Content/Beginning... · Argos Tips & Tricks Michael Capulong ... Tips & Tricks 19. ...

Tips & Tricks Tips & Tricks for Writing Interpretive Text

Tips and Tricks