Improving Flex App Performance Best Practices, Profiling Tools

Optimizing Flex Applications David Coletta Virtual Ubiquity, Inc. [email_address] Blog: http://www.colettas.org

Introduction ,[object Object],[object Object],[object Object],[object Object]

Structure of this talk ,[object Object],[object Object],[object Object],[object Object],[object Object]

Taxonomy of optimization ,[object Object],[object Object]

Improving actual performance ,[object Object],[object Object],[object Object],[object Object]

Improving actual performance ,[object Object],[object Object],[object Object]

Improving perceived performance ,[object Object],[object Object],[object Object]

Too Much For One Talk! ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Big Picture ,[object Object],ActionScript Rendering Other Other tasks (startup, navigation, data manipulation) Critical areas: Object creation Measurement/Layout Rendering

Optimizing Actionscript: Object Creation

The Birth of an Object ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Solution #1: Deferred Creation ,[object Object],[object Object],[object Object]

Solution #2: Ordered Creation ,[object Object],[object Object],<mx:Application> <mx:Panel width="250" height="100" creationPolicy=“queued” /> <mx:Label text="One" /> </mx:Panel> <mx:Panel width="250" height="100" creationPolicy=“queued” /> <mx:Label text="Two" /> </mx:Panel> </mx:Application>

Solution #3: Use <mx:Repeater> Carefully ,[object Object],[object Object],[object Object],[object Object],<mx:VBox> <mx:Repeater id=“r” dataProvider=“{arr}”> <mx:Image source=“r.currentItem.url”/> </mx:Repeater> </mx:VBox> <mx:List dataProvider=“{arr}”> <mx:itemRenderer> <mx:Component> <mx:Image source=“{dataObject.url}”/> </mx:Component> </mx:itemRenderer> </mx:List>

Optimizing Actionscript: Measurement/Layout

Measurement/Layout: Definition ,[object Object],<mx:Application> <mx:HBox> <mx:Button label=“1”/> <mx:Button label=“2”/> </mx:HBox> <mx:TextArea width=“100%” height=“100%” text=“Text”/> </mx:Application>

Measurement/Layout: Description ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],<mx:Application> <mx:HBox> <mx:Button label=“1”/> <mx:Button label=“2”/> </mx:HBox> <mx:TextArea width=“100%” height=“100%” text=“Text”/> </mx:Application>

Solution #1: Reduce Container Nesting ,[object Object],[object Object],[object Object],[object Object],[object Object]

Solution #2: Avoid Redundant Measurement/Layout ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Redraw Regions ,[object Object],[object Object],[object Object],[object Object]

cacheAsBitmap Protects Innocent Bystanders ,[object Object],[object Object],[object Object]

cacheAsBitmap is a Double-Edged Sword ,[object Object],[object Object],[object Object],[object Object],[object Object]

Factors that Affect Rendering Speed ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Reducing Memory Usage ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Setting Styles ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Flex 3 Profiler ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

How the Profiler Works ,[object Object],[object Object],[object Object],[object Object]

Two Kinds of Profiling ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Profiler Scenario ,[object Object],[object Object],[object Object],[object Object],[object Object]

Case Study: Activa Live Chat ,[object Object],[object Object],[object Object]

MXML Containers ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Manual Layout ,[object Object],[object Object],[object Object]

Garbage Collector ,[object Object],[object Object],[object Object],[object Object]

Reference Counting ,[object Object],[object Object],[object Object]

Case Study: eBay SDK ,[object Object]

Goal: represent hierarchical data from web service as objects in Flex ,[object Object],[object Object],[object Object]

Optimizing Introspection ,[object Object],[object Object]

Improving Flex App Performance Best Practices, Profiling Tools

Recommended

Recommended

More Related Content

Similar to Improving Flex App Performance Best Practices, Profiling Tools

Similar to Improving Flex App Performance Best Practices, Profiling Tools (20)

Recently uploaded

Recently uploaded (20)

Improving Flex App Performance Best Practices, Profiling Tools