24 Replies Latest reply: Oct 5, 2011 5:43 PM by rao_mannava RSS

    Very slow instantiation of components in SDK 4

    Andrei Kouzmenkov Community Member

      I'm working on converting an existing Flex application from SDK 3.5 to 4.1.

      The app consists of a number of MX-only custom components, with some skinning.

      The conversion itself wasn't a big issue, and after conversion the application works pretty much as good as before.

       

       

      The only big problem is instantiation of visual components.

      Under SDK 4 that takes 3 times longer!!!

      Now switching to a new workspace takes 15 seconds instead of 3-4 before, which is unbearable!

       

       

      For comparing the same code gets compiled with SDK 3.5 and SDK 4.1 and executed in the same environment.

      With SDK 4.1 the app was attempted to be compiled in MX-only and MX+Spark mode, with Framework merged or RSL. None makes a difference.

      Server-side code is the same.

       

      I understand that old components may get somewhat slower under the new SDK, but 4 times!!!?

      If this is the case, upgrading to SDK 4 makes no sense without rewriting all for Spark.

      Even then where is the guarantee that the same problem doesn't exists for Spark components?

       

       

      In Profiler comparable methods have similar timings, total numbers are also close.

       

       

      Where is that black hole could be? Please HELP!!!

      Did anyone observe similar behavior?

       

       

      === Flash Player 10.1.xxx debug; Flash Builder 4 Premium plug-in; Eclipse 3.5.2/3.6.0; Flex SDK 4.1; WinXP Sp3 32-bit / Windows 7 Ultimate 64-bit

       

      Message was edited by: kolinitcom

        • 1. Re: Very slow instantiation of components in SDK 4
          Andrei Kouzmenkov Community Member

          Ok, looks like SDK4 and Spark are consistently slow.

          I've created 2 projects for SDK 3.5 and SDK 4.1 with identical trivial applications, which simply add a bunch of elements to the visual surface on a button click.

           

          Typical times (from main holder creation to its creationComplete event):

          SDK 3.5: 500 ms

          SDK 4.1 MX: 1700 ms, or more than 3 times longer!!!

          SDK 4.1 Spark: 1500 ms, faster but still 3 times longer (and it's skinless)!!!

          SDK 4.1 Spark with MX CheckBox: about the same as pure Spark.

           

          Not a good job, Adobe :-(

           

          SDK 3.5 and SDK 4.1 MX code is identical:

           

          <?xml version="1.0" encoding="utf-8"?>
          <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" minWidth="955" minHeight="600">

              <mx:Script>
                  <![CDATA[
                      import flash.utils.getTimer;
                      import mx.containers.HBox;
                      import mx.controls.CheckBox;
                      import mx.events.FlexEvent;
                     
                      protected function button1_clickHandler(event:MouseEvent):void
                      {
                          holder.removeAllChildren();
                          var start:int = getTimer();
                          var holdAll:VBox = new VBox();
                          holdAll.addEventListener(FlexEvent.CREATION_COMPLETE, function():void {
                              var end:Number = getTimer();
                              info.text = (end - start).toString();                   
                          });
                          for (var i:int = 0; i < 5; i++) {
                              var vb:VBox = new VBox();
                              var lbl:Label = new Label();
                              lbl.text = "VBox " + i.toString();
                              vb.addChild(lbl);
                              for (var j:int = 0; j < 5; j++) {
                                  var c:HBox = new HBox();                       
                                  for (var k:int = 0; k < 10; k++) {
                                      var comp:CheckBox = new CheckBox();
                                      comp.label = k.toString();
                                      comp.width = 100;
                                      c.addChild(comp);
                                  }           
                                 
                                  vb.addChild(c);
                              }
                              holdAll.addChild(vb);
                          }
                          holder.addChild(holdAll);
                      }
                  ]]>
              </mx:Script>


              <mx:Button label="Add Complex Component" width="300" click="button1_clickHandler(event)"/>
              <mx:Label id="info" text="Time will be here" />
              <mx:VBox id="holder">
              </mx:VBox>
          </mx:Application>

           

          SDK 4.1 Spark:

           

          <?xml version="1.0" encoding="utf-8"?>
          <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
                         xmlns:s="library://ns.adobe.com/flex/spark"
                         xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
              <s:layout>
                  <s:VerticalLayout horizontalAlign="center" verticalAlign="top" />
              </s:layout>
             
              <fx:Declarations>
                  <!-- Place non-visual elements (e.g., services, value objects) here -->
              </fx:Declarations>
             
              <fx:Script>
                  <![CDATA[
                      import flash.utils.getTimer;
                     
                      import mx.controls.DateField;
                      import mx.events.FlexEvent;
                     
                      import spark.components.CheckBox;
          //            import mx.controls.CheckBox;
                      import spark.components.HGroup;
                     
                      protected function button1_clickHandler(event:MouseEvent):void
                      {
                          holder.removeAllElements();
                          var start:int = getTimer();
                          var holdAll:VGroup = new VGroup();
                          holdAll.addEventListener(FlexEvent.CREATION_COMPLETE, function():void {
                              var end:Number = getTimer();
                              info.text = (end - start).toString();                   
                          });
                          for (var i:int = 0; i < 5; i++) {
                              var vb:VGroup  = new VGroup();
                              var lbl:Label = new Label();
                              lbl.text = "VBox " + i.toString();
                              vb.addElement(lbl);
                              for (var j:int = 0; j < 5; j++) {
                                  var c:HGroup = new HGroup();                       
                                  for (var k:int = 0; k < 10; k++) {
                                      var comp:CheckBox = new CheckBox();
                                      comp.label = k.toString();
                                      comp.width = 100;
                                      c.addElement(comp);
                                  }           
                                 
                                  vb.addElement(c);
                              }
                              holdAll.addElement(vb);
                          }
                          holder.addElement(holdAll);
                      }
                     
                  ]]>
              </fx:Script>
             
              <s:Button label="Add Complex Component" width="300" click="button1_clickHandler(event)"/>
              <s:Label id="info" text="Time will be here" />
              <s:VGroup id="holder">
              </s:VGroup>
             
          </s:Application>

          • 2. Re: Very slow instantiation of components in SDK 4
            Flex harUI Adobe Employee

            I will be investigating another 3.x vs 4.x performance issue starting today.

            It may shed some light on your issue, otherwise I will try to look at your

            test case when I'm done with the other one.

             

            Call counts and cumulative times for calls in common may match, but there

            are different code paths in 4.x.  AddElement does other work before calling

            addChild, for example, and then each Group is trying to consolidate its

            display objects.  Your test case of one or two children per group is

            definitely non-optimal and somewhat pathological.

            • 3. Re: Very slow instantiation of components in SDK 4
              Andrei Kouzmenkov Community Member

              Thanks, I'm looking forward for results!

               

              My tests are bad, no doubts, but results correlate really well with the actual app.

              I just wanted to quickly simulate a tree of components, having equivalents in MX and Spark, big enough to be measurable.

              • 4. Re: Very slow instantiation of components in SDK 4
                Flex harUI Adobe Employee

                In both MX and Spark, fewer containers will be better, but the overhead

                might be more noticeable in Spark.

                 

                Spark has replaceable layouts so you can write your own layout to manage

                more children and cut down on containers.

                 

                Our main focus is on "reasonable numbers of containers and children".  The

                case I will be investigating is still showing a problem, although not a 3x

                problem.

                • 5. Re: Very slow instantiation of components in SDK 4
                  Andrei Kouzmenkov Community Member

                  I've counted children components and containers in our custom super-component (wrote a function).

                  It's 476 children out of which 169 are containers. Now it takes at best 15 seconds to initialize that, while previously it used to be at max 4 seconds, which makes almost 4x difference.

                  Depending on user entitlements the app may have from 1 to 5 such super-components (not all of them are equal), which get initialized on as-needed basis.

                   

                  I'm not saying that's we have the best design, because we don't, but at least previously it didn't trouble us too much.

                  The application is trying to resolve complex problems, while presenting lots of various information.

                   

                  In the sample the function counted 285 children out of which 30 are containers, which is even less than in "real application".

                   

                  What's the  "reasonable numbers of containers and children" in Adobe's tests?

                   

                  Counter function (it's not perfect either):

                   

                              private function countChildren(c:Container):Number {
                                  var count:Number = 0;
                                  var ch:Array = c.getChildren();
                                  for each (var child:UIComponent in ch) {
                                      if (child != null) {
                                          count += 1;
                                          if (child is Container) {
                                              count += 0.0001;
                                              count += countChildren(Container(child));
                                          }
                                      }
                                  }
                                  return count;
                              }

                  • 6. Re: Very slow instantiation of components in SDK 4
                    Andrei Kouzmenkov Community Member

                    Somehow  in early tests I overlooked, that results vary a lot depending on Theme in the sample MX app.

                    Under SDK 4 MX app with theme set to Halo, the difference with SDK 3.5 is indeed not drammatic, about x1.3-x1.4.

                    If the theme is the default Spark, then numbers are the reported x3-x4.

                     

                    Still that doesn't help the Spark application. No matter what Theme is set, delay is x3-x4.

                     

                    In the real app the Theme is Halo.

                     

                    I understand that having less containers should make layouting faster. But at least for the sample (unless it's wrong) eliminting containers makes no big difference.

                    Numbers are the same, if not in favor of VHBox version.

                    Below is Canvas-version, with no containers, which adds 285 checkboxes and calculates X and Y, so minimal container layouting should be involved:

                     

                    <?xml version="1.0" encoding="utf-8"?>
                    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" minWidth="955" minHeight="600">
                        <mx:Script>
                            <![CDATA[
                                import flash.utils.getTimer;
                               
                                import mx.containers.Canvas;
                                import mx.containers.HBox;
                                import mx.controls.CheckBox;
                                import mx.core.Container;
                                import mx.core.UIComponent;
                                import mx.events.FlexEvent;
                               
                                protected function button1_clickHandler(event:MouseEvent):void
                                {
                                    holder.removeAllChildren();
                                    var start:int = getTimer();
                                    var holdAll:Canvas = new Canvas();
                                    holder.addChild(holdAll);
                                    holdAll.addEventListener(FlexEvent.CREATION_COMPLETE, function():void {
                                        var end:Number = getTimer();
                                        info.text = (end - start).toString() + "ms";                  
                                    });
                                    for (var k:int = 0; k < 285; k++) {
                                        var comp:CheckBox = new CheckBox();
                                        comp.label = k.toString();
                                        //comp.width = 100;
                                        holdAll.addChild(comp);
                                        comp.y = Math.floor(k / 10) * 20;
                                        comp.x = (k % 10) * 100;
                                    }          
                                }
                            ]]>
                        </mx:Script>
                       
                        <mx:Button label="Add Complex Component" width="300" click="button1_clickHandler(event)"/>
                        <mx:Label id="info" text="Time will be here" />
                        <mx:VBox id="holder"/>
                    </mx:Application>

                     

                    Thanks!

                     

                    Message was edited by: kolinitcom

                    • 7. Re: Very slow instantiation of components in SDK 4
                      Kenny Yates Community Member

                      Are you using the compiler in Flex 3 compatability mode?

                      If so, according to the documentation, the compatability mode is using SDK 3.0 so could be some of the items you have built in your SDK 3.5 version could be causing the slow down if the compiler has to modify them using 3.0 assets.

                       

                      Just a thought...

                      Kenny

                      • 8. Re: Very slow instantiation of components in SDK 4
                        Flex harUI Adobe Employee

                        I started an analysis on your test case while watching the Super Bowl. I'm

                        still rummaging through the data.  Definitely the MXML based skins are a

                        huge factor.  So, I just compared the 3.5 version vs the 4.x version using

                        the Halo theme.

                         

                        The main inefficiency seems to be related to the new style features

                        (per-module styles and advanced CSS).  Advanced CSS is on for virtually all

                        applications.  You can try stripping it out if you aren't going to use a

                        defaultButton in your app.

                         

                        Along the way I found a couple of other inefficiencies we should probably

                        correct.  The initialization of Checkbox is looks like it is doing duplicate

                        work, so if you are creating lots of Checkboxes things will not look very

                        good.

                         

                        You might find that things run a bit faster if you build the tree top-down

                        like we do in MXML.  IOW, add the Vbox, then add the Hboxes to it, then add

                        the CheckBoxes to the Hbox.

                         

                        Please file a bug with your test case and post the bug #.

                         

                        I haven't done any analysis of the Spark test case, and may not get to it

                        right away.  It will be harder to analyze since there I can't really do a

                        side-by-side like I could with the MX test case.  It will help to have a bug

                        1. so I can have something official to spend more time on.

                         

                        • 9. Re: Very slow instantiation of components in SDK 4
                          Andrei Kouzmenkov Community Member

                          Kenny,

                           

                          No I don't use SDK 3 compatibility mode, as I'd like to move forward and potentially migrate to Spark, which is impossible otherwise.

                          • 10. Re: Very slow instantiation of components in SDK 4
                            Kristin95762 Community Member

                            Yeah. I'm very new to Flex 4  framework. More experienced with Flash. I have one combo box and 15 or 20 lines of code max, and I'm surprised at how long it takes to populate the combo box. It is reading a sqlite table, but still. Flash is much faster.

                            • 11. Re: Very slow instantiation of components in SDK 4
                              Andrei Kouzmenkov Community Member

                              harUI, thank you for your hard efforts! I'll open a jira.

                               

                              The real app is using MXML a lot, most dynamically created objects have MXML descriptors.

                              When it comes to instantiation, creating a business object forces creation of other sub-components, referenced in its MXML.

                               

                              Most of the time sub-components are immediately visible. There are no accordions.

                               

                              It's hard to defer sub-components creation, by doing partial instantiations like create holders only first, then sub-holders, and finally business elements.

                              I didn't modify stylesheets, except adding namespaces. I think we don't use advanced CSS features (by ID, descendants). If turning them off is by switching to MX-only mode, then it will be hard to do. I had to use some Spark effects and objects to replace Degrafa, which isn't compatible with SDK 4.

                               

                              The application is heavily styled, uses fancy backgrounds and skin classes.

                              Whenever possible I fight against adding more effects, but users like and value them.

                               

                              There are just few Checkboxes in the app. I've used them in the sample for simplicity only.

                              Again the sample has very little to do with the real app, it was only helpful in indicating the problem without posting to much code.

                              Going forward we may find other contributing problems. After correcting the Theme there is a chance instantiation may be not the biggest one...

                              Still strange to see such huge difference between Themes (unless that happens to me only).

                               

                               

                              Andrei.

                               

                              • 12. Re: Very slow instantiation of components in SDK 4
                                Flex harUI Adobe Employee

                                MXML-based Themes like Spark are noticeably slower then AS-based themes like

                                Halo.  We haven't done much research into why.  We'll probably answer that

                                question after Hero ships.

                                 

                                The default themes from Flex contain a .CSS file that uses Advanced CSS for

                                the defaultButton (the button that has extra thick borders because it will

                                be "clicked" when you hit ENTER).  There may be other advanced CSS selectors

                                in the default theme.  Getting rid of them might speed things up a bit.

                                 

                                If you have a lot of UI widgets, you should consider a UI that defers

                                instantiation of as many widgets as possible based on navigators like

                                Accordion or Viewstack or by States or by Modules.  It will make your app

                                more scaleable in the long run, even if we speed up the framework itself.

                                 

                                In theory, doing top-down instantiation should be possible by creating MXML

                                components for the common patterns.  Lots of folks put all of their logic in

                                an .AS file and just the UI widgets in the MXML file.

                                • 14. Re: Very slow instantiation of components in SDK 4
                                  Andrei Kouzmenkov Community Member

                                  According to Joan Lafferty (Adobe):

                                  We are going to defer this for the current release because we don't have the time to invest in it, but, we would like to look at making some improvements in the next release.

                                   

                                  Thanks, Adobe!

                                  Hopefully it won't take too much time to improve, and precautions will be taken to not degrade performance in new releases.

                                  • 15. Re: Very slow instantiation of components in SDK 4
                                    Toni-Z Community Member

                                    Good post. On our project we have very similar problems.

                                    Thank you Adobe for looking into this. Just to let you know, more customers are waiting for a fix.

                                    • 16. Re: Very slow instantiation of components in SDK 4
                                      Flex harUI Adobe Employee

                                      Make sure you vote on the bug and add as a watcher to track progress.

                                      • 17. Re: Very slow instantiation of components in SDK 4
                                        YNAB Community Member

                                        We saw massive inefficiencies in the way the styles were handled when we migrated to Flex 4 as well. As Alex mentiioned, when advanced CSS is on, it goes _slow_. In our case, we had about 300 styles in our stylesheet that Flex wanted to search through every time it instantiated an individual component. Flex would ask each style, "Do you apply to me?" and then ask the next one, "Do you apply to me?". When you do 300 of these queries per component instantiated, it bogs down quickly. So, for now I've monkey patched StyleProtoChain.as and we've gotten a ton of performance back.

                                         

                                        My fix was pretty hacky, and there are code paths that could cause my cache of styles to get out of sync, but it works for our purposes, and the idea of caching the simple style lookups in a dictionary could serve as the basis of a "real" fix by the Flex team.

                                         

                                        You can see my blog post and get the code here.

                                        • 18. Re: Very slow instantiation of components in SDK 4
                                          Andrei Kouzmenkov Community Member

                                          That's a great finding, YNAB!!!

                                          Just tried the quick fix from the blog in our real application and got the promised result: application initialization reduced exactly by half.

                                          I must have mentioned at the beginning, that our app is heavy on using custom CSS styles, over 300 entries - similar to YNAB's app.

                                          I'm yet to do more thorough comparing on the component level, but the approach looks promising.... and we may need to come up with a solution for dynamic styles.

                                           

                                          Still in our app initialization in SDK 4.1 is about 1.5-2 times slower than in SDK 3.5 for the same code.

                                          But if confirmed, the fix is a huge leap forward towards saving SDK 4.

                                           

                                          So, Adobe, have a look!

                                          There may be other leaks like that!

                                          • 19. Re: Very slow instantiation of components in SDK 4
                                            YNAB Community Member

                                            What great news! Thanks for letting me know! I'm glad to hear it worked so well for you. I've yet to run our app through a profiler to figure out where else it is bogging down. After I make a few other migration fixes, I hope to. Our next release of our software is based on Flex 4 (to get font fallback and other features), but I am nervous about our next release taking a step backwards in performance. Hopefully I can find some other low hanging fruit.

                                            • 20. Re: Very slow instantiation of components in SDK 4
                                              Flex harUI Adobe Employee

                                              That particular performance issue is being tracked by this other bug:

                                              http://bugs.adobe.com/jira/browse/SDK-29880

                                               

                                              It is deferred for 4.5, but I expect it will get opened and looked at

                                              shortly.

                                              • 21. Re: Very slow instantiation of components in SDK 4

                                                thx guys. this background and patch are awesome.

                                                • 22. Re: Very slow instantiation of components in SDK 4
                                                  mcallinan-1

                                                  We have also seen a tremendous performance lift after applying YNAB's css patch.  Our application if fairly large, with over 500 style declarations.  We display lots of information to our users in UI containers that are built dynamically based on data present for each display.  We continue to optimize our app to reduce nesting and simplify the UI presentation, but underlying SDK performance issues like this present a major hurdle in our migration to Flex 4.  To be honest, we can't launch the next release of our product without this issue being resolved.

                                                   

                                                  Adobe, please take a close look at the proposed fix and include your own solution as early as possible, hopefully in 4.5.1 or whatever the next release is.  It will be very much appreciated by your customers building enterprise apps.

                                                  • 23. Re: Very slow instantiation of components in SDK 4
                                                    Community Member

                                                    focus on workarounds not adobe

                                                     

                                                    been doing that for 5 yrs

                                                    • 24. Re: Very slow instantiation of components in SDK 4
                                                      rao_mannava Community Member

                                                      Simple tests show that instantiation of visual components, adding them to the stage got 3-4 times slower than in

                                                      SDK 3

                                                      https://bugs.adobe.com/jira/browse/SDK-29451