Optimizing Flex Applications

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]

Optimizing Flex Applications

Recommended

Recommended

More Related Content

Similar to Optimizing Flex Applications

Similar to Optimizing Flex Applications (20)

Recently uploaded

Recently uploaded (20)

Optimizing Flex Applications