4 Replies Latest reply on Mar 11, 2010 4:28 AM by Karl_Sigiscar_1971

    UI Components High CPU Usage

    opiator

      Hi,

       

       

      I'm trying to optimize our app,it's CPU usage goes from 20-50% when open and about 5% when not visible and idle.

       

      According to http://www.insideria.com/2008/07/flex-ria-performance-considera-3.html, having lots op Containers such as canvasses takes a lot of CPU cycles on each redraw. I have altered other things like the framerate which has helped considerably,but CPU is still high,even though not much is happening in the app(its an rss reader with twit & facebook integratin that refreshes the feeds every 5 mins). So technically every 5 mins it should use some CPU?

       

       

      Now firstly, a lot of sites mention that its not neccesary to wrap your mxml in a top nesting tag. How would one do that in the following example?(simplified version)Most of my mxml components has similiar layout.

       

       

      <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="200" height="150" backgroundColor="#0B0101">

       

          <mx:Script>

       

              <![CDATA[

       

                  private var title:String="";

       

                  public function setVariables(_title:String,_picture:String,_url:String):void

       

                  {

       

                      title=_title;

       

                  }          

       

       

              ]]>

       

          </mx:Script>

       

              <mx:states>

       

              <mx:State name="postLink">

       

              <mx:AddChild position="lastChild">

       

                  <mx:Canvas id="postLink" width="188" height="124" backgroundColor="#E1E1E1" borderStyle="solid">

       

                      <mx:Text x="10" y="0" id="urlLabel" text="" width="166" fontWeight="bold" height="44"/>

       

                  </mx:Canvas>

       

              </mx:AddChild>

       

              <mx:SetProperty name="width" value="188"/>

       

              <mx:SetProperty name="height" value="124"/>

       

              </mx:State>

       

              <mx:State name="closelink">

       

              <mx:AddChild position="lastChild">

       

                      <mx:Canvas id="closeWindow" width="200" height="150" backgroundColor="#E1E1E1" borderStyle="solid">

       

                              <mx:Label x="48" fontWeight="bold" y="36" text="Bookmark Saved"/>

       

                      </mx:Canvas>

       

              </mx:AddChild>

       

              </mx:State>

       

              </mx:states>           

       

          </mx:Canvas>

       

       

      Is it possible to eliminate the extra canvas at the top?Currently our app have massive amounts of canvas nesting,trying to eliminate as much as possible

       


      How would one minify canvas use in the following? I need to show and hide certain canvasses for some condition. Is there no component like <asp:Placeholder like in .NET ? What is the alternative to using absolute layout with canvasses? Is it possible to use Sprites or Panels?Although they give errors if I try to replace the canvasses with them.

       


      <mx:Canvas id="mainModuleCanvas" visible="true" xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:comp="components.*" verticalScrollPolicy="off" horizontalScrollPolicy="off" width="315" height="100%" y="0">
              <mx:Canvas id="topMenuBar" width="100%" height="100%">   
                  <mx:Image source="assets/header-bg.png" x="0" y="0"/>
                  <mx:Canvas verticalScrollPolicy="off" horizontalScrollPolicy="off" x="0" y="40" width="315" height="20" styleName="topMenu" backgroundColor="#0E2E5E"></mx:Canvas> 
                  <mx:Image id="feedLogo" source="" height="40" horizontalCenter="0" y="2"/>
              </mx:Canvas>
              <mx:Canvas id="showTopMenu" verticalScrollPolicy="off" horizontalScrollPolicy="off" x="0" y="40" width="315" height="20" styleName="topMenu" backgroundColor="#0E2E5E">
                  <mx:HorizontalList id="subCategoriesList" width="270" verticalScrollPolicy="off" horizontalScrollPolicy="off" height="20" fontSize="9"  styleName="topMenu" color="#FFFFFF" columnCount="4" textAlign="center" columnWidth="90" x="20" borderStyle="none">
                  <mx:itemRenderer>
                      <mx:Component>
                         <mx:LinkButton click="{outerDocument.loadSubFeed(data.feedID)}" label="{data.subCategoryName}"  height="20" paddingBottom="4" paddingTop="0"   enabled="true"/>   
                      </mx:Component>
                  </mx:itemRenderer>
                </mx:HorizontalList>
                  <mx:Button id="nextButton" x="298" y="5"   label="next" width="12" height="11" labelPlacement="left" icon="@Embed(source='../assets/right-arrow.png')" fillAlphas="[0.0, 0.0, 0.0, 0.0]" borderColor="#0E2E5E" alpha="1.0" cornerRadius="0" fillColors="[#0E2E5E, #0E2E5E]"/>
                  <mx:Button id="prevButton" x="4.75" y="5"   label="previous" width="12" height="11" labelPlacement="right" icon="@Embed(source='../assets/left-arrow.png')" borderColor="#0E2E5E" fillAlphas="[0.0, 0.0, 0.0, 0.0]" alpha="1.0" cornerRadius="0" fillColors="[#0E2E5E, #0E2E5E]"/>
              </mx:Canvas>
              </mx:Canvas>

       

      I know the questions are quite vague,just need a method of elminating unneeded/extra UI components

        • 1. Re: UI Components High CPU Usage
          Karl_Sigiscar_1971 Level 3

          In the first case, I would make Text or Label the root of the component and only have SetProperty calls in the states. You can then position the component from the outside where it's instantiated.

           

          Many developers think that they have to wrap every component with yet another container when in most cases they are already in a container ! No need to add an extra one or more.

           

          I just arrived on an application where developers have created 800+ containers. I can tell you I will slash this to 1/10th if not more using absolute layout and CSS properties.

           

          Containers are indeed the number 1 performance bottleneck in Flex applications before Flex 4 (which has more lightweight container types, without scrollbars and so on). Another thing to consider is container and component nesting. Each UIComponent has a nestLevel property. This should not exceed 4. The more deeply nested your layout is, the more CPU cycles it takes to refresh the layout (and remember, this is a recursive process).

          1 person found this helpful
          • 2. Re: UI Components High CPU Usage
            opiator Level 1

            Hi,thanx for the reply.

             

            Not sure what you mean by " I would make Text or Label the root of the component". Do you mean just having Blank label as the root of the whole component instead of a Canvas?(as <mx:State> cannot be the root component)

            I have to put the <script> code somewhere in the component,does it matter if it's placed low down in any of the components such as Image,Button etc.?

            • 3. Re: UI Components High CPU Usage
              Karl_Sigiscar_1971 Level 3

              >> Do you mean just having Blank label as the root of the whole component instead of a Canvas?

              Yes, that's what I meant.

               

              >> I have to put the <script> code somewhere in the component,does it matter if it's placed low down in any of the components such as Image,Button etc.?

               

              Indeed, it doesn't matter.

               

              You can have:

               

              <mx:Image xmlns:mx="http://www.adobe.com/2006/mxml">

                  <mx:Script>
                      <![CDATA[
                      ]]>
                  </mx:Script>
              </mx:Image>

               

               

              <mx:Label xmlns:mx="http://www.adobe.com/2006/mxml">

                  <mx:Script>
                       <![CDATA[
                       ]]>
                   </mx:Script>
              </mx:Label >

               

               

              <mx:Button xmlns:mx="http://www.adobe.com/2006/mxml">

                  <mx:Script>
                       <![CDATA[
                       ]]>
                   </mx:Script>
              </mx:Button>

               

               

              Also, the separation of concerns would lead you to extract all your styles out of your component and put them into a stylesheet. You would also want to extract all view states and logic and put them into a presentation model so you have a clean separation of concerns.

              • 4. Re: UI Components High CPU Usage
                Karl_Sigiscar_1971 Level 3

                More generally, here is my Flex performance checklist:

                 

                - Run the profiler to identify bottlenecks and memory leaks: number of instances of a given class, execution time of methods, memory usage … E.g item renderers
                - How much data is loaded, processed and displayed at any one time can have a big impact on performance. Reduce the amount of data: paging via parameter to the service
                - Reduce the layout complexity: remove containers so nestLevel <= 4
                - Remove event listeners where possible: use removeEventListener() not just addEventListener()
                - Garbage collection: check Grant Skinner’s checklist (note: according to Ted Patrick, weak references are 10 times slower than hard references. So use removeEventListener() instead).
                - Deferred instantiation of UIComponents (e.g Viewstack children) aka lazy instantiation
                - Interrupted execution of complex functions (especially when looping on a large array collection)
                - Lazy loading of data
                - Unload modules and check if their context has been garbage collected
                - Set datagrids’ liveScrolling property to false
                - Use more efficient code. Favour re-use of existing code in the Flex framework rather than re-writing what exists. Favour simple solutions over complex ones when possible.
                - Have a UID getter/setter on entities mapped with [RemoteClass] for Blaze DS / LCDS for improved performance in sorting / filtering of array collections
                - Too many data bindings decrease performance. Use direct assignment when possible (e.g when setting the value only once).