7 Replies Latest reply on Aug 26, 2010 6:15 PM by Flex harUI

    Performance Optimization Question - CSS or Custom Component?

    jimmyoneshot Level 1

      I'm trying to optimize the performance of my application by slimming things down as much as possible. In my application I have several canvases that all look exactly the same but each of them has an image applied as their background image. The image in question is a png meaning applying background image to every canvas with this particular image would essentially mean that on startup this image is loaded once for each canvas meaning this would take up more space and time than necessary.

       

      What I'm wondering is what would be the best way to slim this down? By using css and applying a style to all of the canvases that has the background image applied in the css file or creating a custom component that has a background image applied to it and using that for the canvases?

        • 1. Re: Performance Optimization Question - CSS or Custom Component?
          Flex harUI Adobe Employee

          Property lookups are somewhat faster than style lookups, but I would guess

          the bottleneck for you is simply the number of PNGs loaded and displayed,

          not how the components decide which PNG to load.

          1 person found this helpful
          • 2. Re: Performance Optimization Question - CSS or Custom Component?
            jimmyoneshot Level 1

            Hi. So you would say that in the case of css versus custom components, custom components are superior as far as performance is concerned?

             

            Basically in my current application the canvases I have are all exactly the same. At the moment I have embedded a png and my application and saved it as a bindable class called "background". I've then bound this to each of the background image properties of all of the canvases i.e:-

             

            backgroundImage="{background}"

             

            Would doing this within a custom component which I could use for the canvases better performance-optimize my application?

             

            I'm just trying to understand performance optimization really through the use of css, custom components ans class binding as above and which is better in general in your opinion? Is it best to simply create custom components wherever an identical component is used more than once?

             

            Also do you know of any other genreal tips for optimizing performance besides the obvious ones such as modules, less images and absolute positioning?

            • 3. Re: Performance Optimization Question - CSS or Custom Component?
              Flex harUI Adobe Employee

              Custom code will almost always run faster than generalized, flexible code,

              but it will take longer to write, debug and maintain that custom code.

               

              Style take longer to fetch than properties, but styles let you change one

              thing and have it affect many instances.

               

              A one-time binding is relatively expensive compared to the AS equivalent,

              but you might then run into timing/lifecycle issues.

               

              Each additional class adds to SWF size and requires its own verification and

              table of methods.  It is not always the right trade-off to make lots of

              custom classes.

               

              Try to tune the DPI of images to what will actually be displayed.  Fix the

              width and height as well as position when possible.

               

              The profiler will tell you where you might save time in your application.

              1 person found this helpful
              • 4. Re: Performance Optimization Question - CSS or Custom Component?
                jimmyoneshot Level 1

                Thanks again for the help. Some great suggestions.

                 

                So let's say ffor example in my application I have a relatively large png image that is within a component that is not within the users vision but is moved into the users view upon application startup i.e. the component move effect is fired upon creation complete of the application and then moves into view with the png image inside it.

                 

                Now my question is what would be the best way performance-wise to populate this image with data out of the following 4 methods?:-

                 

                1.

                 

                <mx:Image id="myImage" creationComplete="myImage.source = 'assets/images/mypic.png'"/>

                 

                2.

                 

                <mx:Image id="myImage" source="assets/images/mypic.png"/>

                 

                3.

                 

                <mx:Image id="myImage" source="@Embed(source='assets/images/mypic.png')"

                 

                4.

                 

                [Embed(source="assets/images/mypic.png")]
                [Bindable]
                public var myPicImage:Class;

                 

                <mx:Image id="myImage" source="{myPicImage}"/>

                 

                And is there any difference between 1 and 2 or 3 and 4? Is embedding images only useful when the same image is to be used multiple times then, otherwise images should be loaded dynamically?

                • 5. Re: Performance Optimization Question - CSS or Custom Component?
                  Flex harUI Adobe Employee

                  3 & 4 are the same.  1 & 2 are almost the same, but 1 will start the load

                  later than 2, and both will not be able to display the image until it is

                  downloaded.

                   

                  3 & 4 will be able to display the image right away, but that is because the

                  user has had to wait for the image to download before he can see anything

                  other than the download progressbar.  The entire app will not start until

                  the image data is downloaded as part of the SWF.

                   

                  Sometimes, the best way to get performance is not to actually improve

                  performance, but rather, to improve the perceived performance.  For example,

                  you could embed a low-res version of the image in the SWF that only takes

                  50K for example, and add a blur filter and move it while the high-res

                  version is being downloaded by a hidden Image control, then swap in the

                  high-res one when it is ready.  When an image is blurred and/or moving

                  quickly, it is hard to tell the quality of it.

                  • 6. Re: Performance Optimization Question - CSS or Custom Component?
                    jimmyoneshot Level 1

                    Excellent idea and that could definitely be applied to my application. I suppose a good way to achieve it would be to apply the image change to the effectEnd property of the move effect which moves my component i.e. effectEnd="myImage.source='assets/images/mypic.png'" and just have the low res version (likely a jpeg) initially applied to the image beforehand.

                     

                    By the way is method 4 pretty much useless if you are only using the image once?

                     

                    I'm assuming that if I have a lot of image components and I embed an image via the number 4 method and bind their sources to the created class will this essentially be the same as loading the image just once then reusing it rather than once for each image component which would be the case if I did the embedding within their source properties?

                     

                    Thanks for all the help.

                    • 7. Re: Performance Optimization Question - CSS or Custom Component?
                      Flex harUI Adobe Employee

                      You can try effectEnd, but there is still no guarantee the image has

                      finished downloading over a slow network.  You could keep moving the image

                      or apply a slow un-blurring based on how much of the image is downloaded.

                       

                      I think we do some consolidation of embeds, but for code maintenance I would

                      use 4 for sharing an image.