Reduces the complexity of the display list to improve performance

Add FLASH application
Program
The simplest way to achieve performance is to remove all hidden objects from the display list and use a minimum number of display objects. Code
Set
Execute the task by traversing the entire display list, that is, from the top of the display list (stage) to the main application class. Flash
Player executes the code and re-draws all the children in the list from top to bottom until the Display object is reached.
A container can inherit any class from displayobjectcontainer, such as uicomponent, group, or Sprite.

Download

(19.12 KB) yesterday

Especially in mxml
It is easy to nest the Display object, but each nested object is very performance-consuming, because each object added to the real object list inherits a class, this class inherits from another one. To understand why Nesting is highly expensive, let's take a look at the hierarchical structure of the List class.

Download

(50.05 KB) yesterday

As3

When talking about the display list, for as3, all the display objects used to be movieclip
. In the early flash versions of Flash Pro (AS1 and as2), The movieclip class is animated.
. Each movieclip symbol contains the behavior and functions of the object to be displayed, as well as additional attributes of the Operation timeline.
.
In many cases, you do not need extra layers or timeline overhead. In fact, as3 provides an object called displayobject.
Displayobject is the underlying base class for all objects that can be added to the display list. It inherits eventdispatcher (Object-based ).
It includes some classes to help manage objects (such as cacheasbitmap
)
And visual attributes. The Display object container is such an object that can contain sub-objects (these sub-objects are display objects ).
Displayobjectcontainer contains methods to manage their child objects, such as addchild
Numchildren (number of child objects included in the container) and removechild (remove sub-objects ).

Sometimes, you need to display the image without the timeline. In this case, you need to use Sprite, which inherits from the displayobjectcontainer class. Generally, you 'd better use bitmap, shape, and sprite classes or their subclasses instead of movieclip.

Flex3

Below is the minimal flex. Flex is flexsprite for the core class of the display object. Besides returning a string to indicate the position of the object, it is no different from Sprite. The next step is uicomponent, which inherits flexsprite and is also a visual component of flex3.
. Uicomponent includes the keyboard and mouse
Interaction, such as label. It also contains many features, such as accessibility (accessibility), style, state, invalidation and validation (validity), databinding (Data
Binding), effect (Effect
), Embedded font, and so on.

Flex4

The following is how flex4. flex4 uses group as spark.
(Equivalent to uicomponent in MX) the container base class of the visible element. Then you can use a series of components, such as skin, graphic, hgroup, and vgroup.

In addition to group, you can also use skinnablecomponent, which is the superclass Of All Spark components and defines the base class for the skinnable component. Skin using the skinnablecomponent class is a typical subclass of the Skin Class.

Spark button
Is
Example. The buttonbase class is the base class of All Spark button components. Button and togglebuttonbase are subclasses of buttonbase.
Similarly, the checkbox and radiobutton classes are subclasses of togglebuttonbase.
The button component inherits the buttonbase and uses the default skin, which contains a text label. You can customize skin classes to add images to controls or anything else you need.
The default button skin is spark. Skins. Spark. buttonskin, which inherits from skin.
The last mentioned is the components in Spark, which are easy to change, but also very important.

Below are some tests. Display the memory usage of Objects

1. Shape: 224 bytes
   
2. 
   
3. Sprite: 392 bytes
   
4. 
   
5. Movieclip: 428 bytes
   
6. 
   
7. Uicomponent: 1036 bytes
   
8. 
   
9. GROUP: 1200 bytes

Copy code

Next, let's take a look at the execution time of the Flash Player Code on the frame. We recommend that you use "I" for development a few days ago
Framestats Tool
. The job is to create a quick test and then add the method
Framestats
It allows you to view the code execution time (in milliseconds) on one or several frames. I will set the frame rate to 1 second (this makes the test clearer and easier to observe), and then call a method that will be added to the Display object, add a display object to the display list. Then, you can track the frame lifecycle in the console.

1. 
   
2. Protected function creationcompletehandler (): void
   
3. Framestats = new framestats (flexglobals. toplevelapplication, false );
   
4. Frameratecontrol = new frameratecontrol (flexglobals. toplevelapplication, false, false, 1, 1 );
   
5. VaR componenent: uicomponent = new uicomponent ();
   
6. Componenent. addchild (framestats );
   
7. Framestatsholder. addelement (componenent );
   
8. Trace ("Sprite:" + getsize (new group ()));
   
9. Uicom. addchild (sprite );
   
10. Framestats. testingexecutiontimeofmethod (methodtotest, 10000 );
    
11. Private function methodtotest (): void
    
12. Sprite. addchild (new group ());
    
13. </FX: SCRIPT>
    
14. <S: Group ID = "framestatsholder"/>
    
15. <Mx: uicomponent id = "uicom"/>

Copy code

Display object

When 10000 display objects are added, the code execution and subclass of the main base class constructor are as follows:

1. 
   
2. Shape
   
3. 
   
4. Constructor Code of Children executed: 276
   
5. 
   
6. Sprite
   
7. 
   
8. Constructor Code of Children executed: 399
   
9. 
   
10. Uicomponent
    
11. 
    
12. Constructor Code of Children executed: 1078
    
13. 
    
14. Group
    
15. 
    
16. Constructor Code of Children executed: 1195

Copy code

As expected, constructor code and execution of each constructor will take a longer time when there are many nested objects. If you know that flash player often puts constructor methods into its own code, this is helpful, so the execution time on the constructor will be longer than other classes, we should try to reduce the code in the constructor.

Add 1000 display objects

Button:
Although I have added 10000 simplebutton display objects, it takes only 33 milliseconds for the player to set the frame rate to 1 FPS, because simplebutton is displayed
The hierarchy of the Object Tree is relatively low, so it is a relatively small nested structure.
Sparkbutton takes longer time to execute code on the constructor than halo, but it is interesting that spaributton has shorter rendering time for the display list.

1. 
   
2. Simplebutton
   
3. 
   
4. Constructor Code of Children executed: 33
   
5. 
   
6. Final user code executed: 730
   
7. 
   
8. Player renders changes display list: 304
   
9. 
   
10. MX. Button
    
11. 
    
12. Constructor Code of Children executed: 820
    
13. 
    
14. Player renders changes display list: 7075
    
15. 
    
16. S: button
    
17. 
    
18. Constructor Code of Children executed: 2392
    
19. 
    
20. Player renders changes display list: 4539

Copy code

Text

The result of adding text is also very interesting. Spark labels do a good job in rendering time, but the execution time of constructor is not as good as that of Halo components. TLF is very poor in rendering, but the time of the constructor is very good.

1. 
   
2. Textfield
   
3. 
   
4. Constructor Code of Children executed: 68
   
5. 
   
6. Player renders changes display list: 168
   
7. 
   
8. MX: Text
   
9. 
   
10. Constructor Code of Children executed: 743
    
11. 
    
12. Player renders changes display list: 685
    
13. 
    
14. S: Label
    
15. 
    
16. Constructor Code of Children executed: 1136
    
17. 
    
18. Player renders changes display list: 198
    
19. 
    
20. S: richtext
    
21. 
    
22. Constructor Code of Children executed: 416
    
23. 
    
24. Player renders changes display list: 3224

Copy code

Conclusion

-- Use a low-level class (that is, the class located near the root of the structure tree), such as textfield and simplebutton (if possible), instead of Halo and spark, it may need more code, but it will improve the performance.
-- Avoid using TLF
-- Use HALO components instead of spark Components
-- When customizing components, sprit> movieclip & uicomponent> group
-- When creating a vector image, we recommend that you use the shape Display object.