9 Replies Latest reply on Mar 4, 2010 10:35 AM by Jaylach

    Poor performance when dragging item within a list loaded with images - Flex 4

    Jaylach

      Hi,

       

      I have a custom built List component that is using a TileLayout. I am using a custom itemRenderer to load images into this list from our server (in this test, 44 images rae loaded). I have enabled dragEnabled and dragMove so that I can move items around within the list. The problem comes when I start dragging an item. The dragging operation is very slow and clunky.

       

      When I move the mouse to drag the item, the dropIndicator does not get refreshed for a few seconds and the movement feels like my PC is lagging pretty badly. I've also noticed that during this time my CPU usage is spiking up to around 25-40%. The funny part is I can scroll the list just fine without any lag at all, but the minute I drag the application starts to lag really bad. I do have some custom dragOver code that I used to override the dragOverHandler of the list control, but the problem persists even if I take that code out. I've tried with useVirtualLayout set to both true and false and neither setting made a difference. 

       

      Any ideas as to what could be causing the poor performance and/or how I can go abouts fixing it?

       

      Thanks a lot in advance!

        • 1. Re: Poor performance when dragging item within a list loaded with images - Flex 4
          Flex harUI Adobe Employee

          Which release of Flex are you using?  You can run the performance profiler

          to see what is taking up the time.

          1 person found this helpful
          • 2. Re: Poor performance when dragging item within a list loaded with images - Flex 4
            Jaylach Level 1

            I'm using the latest SDK marked as Stable.. 4.0.0.13875 - I believe it was released on January 29, 2010.

             

            I've ran the profiler and the only thing I see that sticks out is the itemRenderers are using up a lot of memory. I have to assume that's because of the images loaded in them. However, I have a hard time believing Flex can't have even 44 small images (under 25k each) displayed at one time without an issue. I've was able to get hundreds of bigger images to display in a Flex 3 TileList without any hassle at all.

             

            Any other ideas?

            • 3. Re: Poor performance when dragging item within a list loaded with images - Flex 4
              CoreyRLucier Adobe Employee

              I think Alex was recommending using the performance profiler (not the memory profiler), e.g. enable the performance profiler when prompted and the 'capture performance profile' button right before and after you attempt the drag operation.

               

              Or feel free to post your sample somewhere (include source view).

               

              -C

              1 person found this helpful
              • 4. Re: Poor performance when dragging item within a list loaded with images - Flex 4
                Jaylach Level 1

                Ahh, good call about the Performance profiler. I'm pretty new to the profiling thing with Flex (haven't used Builder Pro before

                the Flex 4 beta) so please forgive me

                 

                I found some interesting things running the performance profiler but I'm not sure I understand what to make of it all. I cleared the Performance Profile data when right before I loaded the images into the list. I then moved some images around and then captured the Profiling Data (If I understand Adobe correctly, this is the correct way to capture performance information for a set of actions).

                 

                What I found is there is a [mouseEvent] item that took 3101ms with 1 "Calls" (!!!!). When I drill down into that item to see the Method Statistics, I actually see three different Callees and no callers. The sum of the time it took the Callees to execute does not even come close to adding up to the 3101 ms (about 40ms). I'm not sure what I can make of those numbers, or if they are even meaningful. Any insight into these?

                 

                The only other items that stand out to me are [pre-render] which has 863ms (Cumulative Time) / 639ms (Self Time), [enterFrameEvent] which has 746ms / 6ms (?!), and [tincan] (what the heck is tincan?) which has times of 521ms for both Cumulative and Self.

                 

                Can anyone offer some insight into these numbers and maybe make some more suggestions for me? I apologize for my ignorance on these numbers - as I said, I'm new to the whole Flex profiling thing.

                 

                Many thanks in advance!

                 

                Edit: I just did another check, this time profiling only from the start of my drag to the end of my drop, and I still see [mouseEvent] taking almost 1000ms of Cumulative Time. However, when I double click that item to see the Method Statistics, no Callers or Callees are listed. What's causing this [mouseEvent] and how come it's taking so long?

                • 5. Re: Poor performance when dragging item within a list loaded with images - Flex 4
                  Jaylach Level 1

                  Update -

                   

                  I just noticed something a little odd (or maybe not). I'm overriding the dragOverHandler in my List control because I need to be able to set the dropFeedback based on the position the dragged item is over in the list (to either DragManager.MOVE or DragManager.NONE). I was setting this everytime the dragOverHandler method was called by the super of my List control.

                   

                  Doing this was causing MANY (over 100 if I dragged long enough) "_Module_Styles_embed_css_Assets_swf_skins_cursor_DragMove" and ""_Module_Styles_embed_css_Assets_swf_skins_cursor_DragReject" objects to be created. They were using upwards of 20,000k memory as they were not getting cleaned up until the GC kicked in. This was causing some (but not all) of the performance issues I was seeing while dragging. I was able to increase performance a little by first checking if the DragManager was already showing the feedback I wanted (DragManager.getFeedback()). If so I do not switch, if not I switch. This still creates a new instance everytime I switch feedback, but the number is A LOT smaller. I always just assumed that these feedbacks were singleton, but it appears they are not.

                   

                  This was able to help a bit, but the performance still isnt' great so if anyone has any other ideas for me I'd greatly appreciate it. Thanks

                  • 6. Re: Poor performance when dragging item within a list loaded with images - Flex 4
                    Jaylach Level 1

                    I was able to finally crack this issue. The problem was using Groups, HGroups. VGroups. and Labels (probably other DisplayObjects also) in my item renderer. The moment I added one of the above controls to my itemRenderer, the performance started to tank. The more I added, the more the performance tanked. I was using these to layout the itemRenderer (there's a lot of stuff that need to be placed in specific spots) but I am now manually positioning all these items on the renderer. The performance is MUCH MUCH better now.

                     

                    Is this is a known issues with these or is this just something weird with my scenario?

                    • 7. Re: Poor performance when dragging item within a list loaded with images - Flex 4
                      CoreyRLucier Adobe Employee

                      Your time on this is much appreciated. Apologies you weren't able to get any concrete "this is what you are doing wrong" input from the forum but in cases like this it's tough to speculate without a specific example.

                       

                      Would you be willing or able to open up a Flex SDK bug in JIRA, go ahead and pile in the Groups, HGroups, etc. without your other optimizations as well, and mark it as a "Performance" issue in the bug report and it will be looked at by the dev team?  A self contained example will make it much easier to analyze for sure, just fyi.

                       

                      Much obliged.

                       

                      -Corey

                      • 8. Re: Poor performance when dragging item within a list loaded with images - Flex 4
                        Flex harUI Adobe Employee

                        That's sort of a fact-of-life in Flash.  If you have enough display objects

                        doing enough stuff, performance will suffer and optimization required.  In

                        some cases, setting cacheAsBitmap=true can help.

                        • 9. Re: Poor performance when dragging item within a list loaded with images - Flex 4
                          Jaylach Level 1

                          Corey - I definitely plan on filing a bug on this issue. It's funny - I was stripping down my code so I could post a sample up online in hopes it would help get me a solution (I had to remove everything talking to the server as our server is not accessible from the outside), and in doing so I was able to determine the real problem was coming from the DisplayObjects

                           

                          Flex - I tried setting cacheAsBitmap to true, and it helped but only minimally. This wasn't an issue of having a lot of DisplayObjects - I see performance take a noticeable hit when I add just one Label to the render. The more display objects I add (in my case, Groups, HGroups, and VGroups), the bigger the performance hit becomes. I was able to recreate the same itemRenderer in Flex 3 using Canvas and I do not see nearly the same performance hit as I do in Flex 4.

                           

                          Thank you both for answering