플렉스 프로파일링/메모리 관리 자세히...

http://www.insideria.com/2008/06/profiling-flex-applications-sa.html

Profiling Flex Applications

The following has been excerpted from  Adobe Flex 3: Training from the Source by Jeff Tapper, Michael Labriola and Matthew Boles with James Talbot. Copyright © 2008. Used with permission of Pearson Education, Inc. and Adobe Press.

In this lesson, you will learn about both memory and performance profiling, two techniques facilitated by the new Profiler feature in Flex Builder 3 Pro. (Note: The new profiling feature is only available to users of Flex Builder 3 Pro. An evaluation version of Flex Builder 3 Pro is availabl from www.adobe.com/go/flex/. Flex Builder Standard users will not be able to access the profilerscreens.) To understand the need for this tool, you need to learn some details about how Flash Player executes code in Flex and how it allocates (gives) and frees (takes back) memory.

Flash Player Memory Use

This lessons deals with a lot of memory-related issues. So far in this book, we have largely ignored the details behind the process of memory and garbage collection because it can be immensely complicated to understand completely. However, it is necessary to have at least a high-level understanding to use the Flex Profiler as an effective tool, so we’ll discuss these issues in a simplified way that is intended to provide some understanding rather than convey complete technical correctness.

Flash Player Memory Allocation

Flash Player is responsible for providing memory for your Flex application at runtime. When you execute a line of code that creates a new instance of the DataGrid class, Flash Player provides a piece of memory for that instance to occupy. Flash Player in turn needs to ask your computer’s operating system for memory to use for this purpose.

The process of asking the operating system for memory is slow, so Flash Player asks for much larger blocks than it needs and keeps the extra available for the next time the developer requests more space. Additionally, Flash Player watches for memory that is no longer in use, so that it can be reused before asking the operating system for more.

Passing by Reference or Value

There are two broad groups of data types that you need to understand when dealing with Flash Player memory. The first group is referred to as primitives, which include Boolean, int, Number, String, uint. These types are passed by value during assignment or function calls.

So, if you were to run the following example:

var a:Number;
var b:Number;
a = 5;
b = myAge;
a = 7;

It would create two numbers, and assign their values separately. From a very high level, Flash Player memory would look like this:

The second group is objects, which pass by reference.

Running the following example:

var a:Object;
var b:Object;
a = new Object();
a.someVar = 5;
b = a;
b.someVar = 7;

It would create a single Object instance with two references, or ways to find the object. From a very high level, Flash Player memory would look like this:

This point is so important that it is worth a walkthrough of the code. First, we create two variables named a and b. Both variables are of type Object. Next, we create a new Object instance and assign it to the variable a. It can now be said that a refers to the new object. When we set a.someVar to the value 5, we are setting that property inside the object that a refers to. Next, we assign a to b. This does not make a copy of the object, but rather simply ensures that a and b both now refer to the same object. Finally, when we set b.someVar to the value 7, we are setting that property inside the object that both a and b refer to. Since a and b both refer to the same object, a.someVar is exactly the same as b.someVar.

Flash Player Garbage Collection

Garbage collection is a process that reclaims memory no longer in use so that it can either be reused by the application or, in some cases, given back to the operating system. Garbage collection happens automatically at allocation, which is often confusing to new developers. This means that garbage collection does not occur when memory is no longer in use, but rather occurs when your application asks for more memory. At that point, the process responsible for garbage collection, called the Garbage Collector, attempts to reclaim available memory for reallocation.

The Garbage Collector follows a two-part procedure to determine which portions of memory are no longer in use. Understanding this procedure will give you the insight necessary to develop applications that use memory appropriately and to understand the information presented by the Flex profiler.

The first part of the garbage collection procedure is referred to as reference counting, and the second is referred to as mark and sweep. Both rely upon different methods of ensuring that the memory in question is no longer referenced by other objects in use.

As was demonstrated earlier, when you create a new object, you usually also create a reference, or a way of referring to, that object. Looking at this code snippet, you can see we create a reference named canvas to our new Canvas instance and one named lbl to our newly created Label. We also add the Label as a child of the Canvas.

var canvas:Canvas = new Canvas();
var lbl:Label = new Label();
canvas.addChild(lbl);

All components also maintain a reference to their children, and all component children maintain a reference to their parent. This means the references from the previous code snippet look like the following image:

The previous small snippet demonstrates at least four references that we need to keep in mind.

• canvas is a reference to an instance of Canvas
• lbl is a reference to an instance of Label.
• lbl.parent is a reference to the Canvas instance.
• canvas.getChildAt(0) returns a reference to the Label instance.

The following application is used to illustrate how both parts of the garbage collection procedure determine what is free for collection.

<?xml version=&#8221;1.0&#8221; encoding=&#8221;utf-8&#8221;?>
	<mx:Application xmlns:mx=&#8221;http://www.adobe.com/2006/mxml&#8221;
		creationComplete=&#8221;onCreation(event)&#8221;>
		<mx:Script>
		<![CDATA[
		import mx.controls.TextInput;
		import mx.controls.Label;
		import mx.controls.ComboBox;
        import mx.containers.Canvas;
        import mx.controls.DataGrid;
        import mx.containers.VBox;
        import mx.containers.HBox;

		private function onCreation( event:Event ):void {
 			var hBox:HBox = new HBox();
 			var vBox:VBox = new VBox();
             vBox.addChild( new DataGrid() );
             vBox.addChild( new ComboBox() );
             hBox.addChild( vBox );
             this.addChild( hBox );
             var canvas:Canvas = new Canvas();
             canvas.addChild( new Label() );
             var textInput:TextInput = new TextInput();
 		}
		]]>
	</mx:Script>
</mx:Application>

The application calls the onCreation() method when the creationComplete event occurs. This method creates a new HBox, with a VBox inside of it. The VBox contains a DataGrid and a ComboBox instance. The HBox is later added as a child of the application. A Canvas instance is then created with a Label instance as a child and finally a TextInput is instantiated. However, it is important to note that neither the Canvas instance nor the TextInput is ever added to the application via the addChild() method. The following figure shows the important references just before exiting the onCreation() method.

The diagram shows the references created in the onCreation() method, including the variables canvas, lbl, hBox, vBox, and textInput. However, these variables are defined within the onCreation() method. This means the variables are local to the method; once the method finishes execution, those references will disappear, but the objects created within this method will continue to exist.

As we mentioned previously, references are the metric that the Garbage Collector uses to determine the portions of memory that can be reclaimed. If the developer does not have a reference to an object, he or she has no way to access it or its properties. If there is no way to access the object, then the Garbage Collector reclaims the memory it used to occupy.

The first method that the Garbage Collector uses to determine if references to an object exist is called reference counting. Reference counting is the simplest and fastest method to determine if an object can be collected. Each time you create a reference to an object, Flash Player increments a counter associated with the object. When you remove a reference, the counter is decremented. If the counter is zero, the object is a candidate for garbage collection.

Looking at the example code, the only object with a zero reference count is the TextInput. After the onCreation() method is completed, the TextInput is left without any references. Once again, if there is no way to reference an object, then the object may be collected. This example also reveals a problem with reference counting: the circular reference.

If you examine the Canvas and Label, each has a reference to the other, meaning that each has a reference count greater than zero. However, there are no other references to either of these components in the application. If Flash Player could identify this fact, the memory for both of these components could be reclaimed. This is the reason for the second method used within the garbage collection procedure, called mark and sweep.

Using this method, Flash Player starts at the top level of your application and marks each object to which it finds a reference. It then recurses down into each object and repeats the process, continuing to dive further until it runs out of objects to mark. At the end of this process, neither the Canvas nor Label would be marked, and would become candidates for garbage collection. Although this method produces definitive results, it is very slow compared to reference counting, so it is not run continually. Working together, these two methods can be used to achieve higher levels of performance and garbage collection accuracy.

Garbage Collection

Now that you understand how garbage collection decides to reclaim memory, you can begin to establish practices to let the Garbage Collector do its job. Simply stated, you need to ensure you remove all references to an object when you no longer need it. Leaving an accidental reference to an object prevents that memory from ever being reclaimed; the inability to reclaim this memory can cause your memory to continue to grow as the application continues to execute. This is commonly referred to as a memory leak.

As you first learned in Lesson 10, “Creating Custom Components with ActionScript 3.0,” visual children are added to components using the addChild() method. Children can also be removed using the removeChild() or remoteChildAt() method. The first method requires you to provide your own reference to the child needing removal, such as removeChild(hBox), whereas the second method allows you to specify the index of the child within its parent, removeChildAt(0). The second simply uses the reference maintained by the parent to identify the child. These methods ensure that both the parent and child references are cleared from within the components.

In our previous example, if you removed the HBox from the application with the removeChild() method, the HBox and every other object contained within it would become available for collection, as there are no other references to the child. This is fairly simple to explain; however, there is a caveat. There are other ways that references are created and maintained besides the variables and properties we have discussed so far.

In fact, the most common cause of memory leaks when programming in Flex is the use of event listeners without proper care.

Understanding leaks caused by event listeners

In Lesson 9, “Using Custom Events,” you learned about the addEventListener() method, which allows you to programmatically listen to an event being broadcast. We need to dive a little deeper into this concept and develop a high-level model of this functionality to understand its implications to garbage collection.

Objects that wish to be notified when an event occurs register themselves as listeners. They do this by calling the addEventListener() method on the object that broadcasts the event (called the broadcaster or dispatcher). The following example shows a simple case:

var textInput:TextInput = new TextInput();
textInput.addEventListener(‘change’, handleTextChanged);

In this case, the TextInput is expected to broadcast an event named change at some point in the future, and you want the handleTextChanged method to be called when this occurs. When you call addEventListener() on the TextInput instance, it responds by adding a reference to the object (the one that contains the handleTextChanged method) to a list of objects that need to be notified when this event occurs. When it is time to broadcast the change event, the TextInput instance loops through this list and notifies each object that registered as a listener.

In memory this looks something like this:

The important thing to take away from this discussion is that each object that broadcasts an event maintains a reference to every object listening for the event to be broadcast. In terms of garbage collection this means that, in certain circumstances, if an object is listening for events, it may never be available for garbage collection.

Note: For more information on event dispatching, please refer to the IEventDispatcher interface in the Flex 3 livedocs.

Your main weapon to combat this problem is diligence. Much like any child that is added with addChild() can be removed with removeChild(), addEventListener() has a parallel function named removeEventListener() that stops listening for an event. When removeEventListener() is called, it also removes the reference to the listener kept by the broadcaster, potentially freeing up the listener for garbage collection.

In an ideal world, the number of addEventListener() and removeEventListener() calls in your application should be equal. However, there are times when you have less control over when objects are no longer needed and using removeEventListener() is simply not feasible. Shortly, you will see an example of a situation similar to this in the test application for this lesson. In these situations, we can use a concept called weak references.

Using weak references with listeners

Weak references, like most of the items in this lesson, are an advanced topic that requires quite a bit of understanding to use correctly. Instead of covering this topic completely, we will explain the high-level portions that are important in this context.

When adding an event listener to a broadcaster, the developer can specify that the event listener should use weak references. This is accomplished by specifying extra parameters to the addEventListener() method.

var textInput:TextInput = new TextInput();
textInput.addEventListener(‘change’, handleTextChanged, false, 0, true);

Previously, you were taught to use the first two parameters of the addEventListener() method: the name of the event and the method to call when the event occurs. However, there are three other parameters that can be specified. In order, these parameters specify whether the event listener should use capture, its priority relative to other listeners for this event, and finally whether weak references should be used. The first two are beyond the scope of this lesson, but the last one is critical to garbage collection.

Note: For more information on the other addEventListener arguments, please refer to “Registering event handlers” in Flex 3 programming elements.

Specifying a value of true (the default is false) for the fifth parameter of the addEventListener() method specifies that the reference established by this listener is to be considered weak. All the references that we have discussed so far in this lesson are considered strong references, which we will simply say are references considered by the Garbage Collector when deciding if an object is available for collection. Conversely, weak references are ignored by the Garbage Collector, meaning that an object with only weak references will be collected.

As a more concrete example, if an object had a strong reference and three weak references to it, it could not be collected as garbage. However, if the strong reference was removed, the weak references would be ignored and the object could be collected.

In practice, this means that specifying the weak reference flag on addEventListener() calls is almost always a good practice. It prevents the case where listening to an event is the only reason that an object is not collected.

Memory Profiling a Flex Application

Memory profiling involves examining the memory used, as well as the memory currently in use, by objects in your application. Those objects could be simple classes, like Strings, or complex visual objects, like DataGrids. Using memory profiling, you can determine if an appropriate number of your objects exist and if those objects are using an appropriate amount of memory.

Reviewing the ProfilerTest Application

In this exercise you will use a new sample project that has been poorly designed with memory leaks and performance issues. Using the Flex Builder Profiler, you will learn the basic interface and identify a memory leak caused by an event listener issue. You will then fix the issue and verify the results with the Profiler.

1 Choose File > New > Flex Project. Set the Project name to be ProfilerTest.

2 Set the Project location to be flex3tfs/Lesson26/profiler/start.

3 For the Application type select Web application.

4 Set the Server technology to None, and then click Next.

5 Leave the Output folder as bin-debug, and then click Next.

6 Leave the Main source folder as src.

7 Click the Browse button for the Main application file, select ProfilerTest.mxml, and then click OK.

8 Click Finish.

You have now created a project to run the application for profiling practice.

9 Run the ProfilerTest.mxml application.

10 Click one of the categories on the left and the products should appear on the right.

11 Now click the Toggle View Only button below the categories.

The Add to Cart button in each of the products should toggle between visible and hidden as you click this button.

12 Click several more categories.

Note the momentary pause that occurs each time you click a category before the new products display on screen.

13 Close the browser, and return to Flex Builder.

14 Open the src/managers/UpdateManager.as file, src/component/ImageDisplay.mxml file, and src/ProfilerTest.mxml file inside of Flex Builder.

At this point, you know enough Flex and ActionScript to look through this code on your own. Here is a brief high-level description of the code and the interaction of the objects. Using this description, review the code and ensure you can identify all of the major points.

UpdateManager.as

Sometimes you want to ensure that only one instance of a specific object exists in an application. For example, there can only be one tag in any Flex application. The UpdateManager is one of these objects. We want to ensure that we create just one UpdateManager and that every other object in the system uses this single instance, so it follows a specific design pattern called the singleton pattern. The details of this pattern and how it works are inconsequential to this lesson. It is just important to understand that there will only be one UpdateManager in the entire application at any time.

The UpdateManager’s job is to broadcast an event called toggleViewOnly to its listeners whenever the UpdateManager’s toggleViewOnly() method is called.

ImageDisplay.mxml

This class defines each of the boxes that display product information on the right side of the screen. It displays critical information, such as the product name and price, and defines the Add to Cart button, which is initially hidden.

Each ImageDisplay has a bindable public property called product, which contains information about the product being displayed. It also listens to the UpdateManager’s toggleViewOnly event and responds by changing the visible state of the Add to Cart button.

ProfilerTest.mxml

This is the main application for your profiling tasks. It has a VBox with images for each category of food product on the left side and a repeater tag that displays several ImageDisplay instances dependent upon the selected category.

When a category image is clicked, the handleNavClick() method is called and passed the name of the category. The handleNavClick() method constructs a filename based upon the category and calls loadNewXMLData to load that XML file using an HTTPService. If the data loads successfully, the result is passed to the dataProvider of the repeater, which creates the appropriate number of ImageDisplay instances and passes each instance their data via the public product property.

When the Toggle View Only button is clicked, the toggleViewOnly() method of the updateManager is called to notify its listeners.

Profiling the ProfilerTest Application

In this exercise, you will use the memory profiling capabilities of the Flex Profiler to identify a memory leak in the ProfilerTest application. You will capture and review memory snapshots, identify reference relationships between objects, and determine the object responsible for the memory leak.

1 Click the Profile Application button (immediately to the right of the debug button).




The application begins launching, but focus will then be given back to the Flex Builder window and a Configure Profiler window will appear.

2 Ensure that “Enable memory profiling” and both “Watch live memory data” and “Generate object allocation stack traces” are selected.
Memory profiling will drastically slow down your application as it collects a significant amount of data about when, where, and how often objects are created. These options should only be selected when attempting to diagnose a memory leak or verify that a leak does not exist.

3 Click Resume. The Eclipse perspective changes to Flex Profiling.

4 The Profiling perspective begins displaying information regarding memory usage, cumulative and current object instances, as well as cumulative and current memory use for each object type.

The upper-left corner of the screen shows the application currently being profiled. This area also shows memory snapshots, a concept you will explore shortly, and several icons on the upper right that you will learn to use.

The upper-right corner shows a graph of current memory usage along with peak memory usage. One clear indicator of a memory leak in an application is that the memory never truly peaks. If your application continues to grow with continued use over time, you likely have a memory leak.

The bottom of the screen currently contains a view called Live Objects. This view shows the class, package, and cumulative and current instances of each object type, as well as the cumulative and current memory used by those objects. On the right side of the screen at the same level as the Live Objects tab, you will see a series of icons that you will explore shortly.

5 Switch to your web browser running the ProfilerTest application, and click the Dairy category.

With the memory profiling enabled, the entire application moves much more slowly than before.

6 Once the products from the dairy category appear on the right, switch back to Flex Builder and look at Live Objects view. You should now see the ImageDisplay class listed in the leftmost column. The cumulative instances and the instances should both say 3.

When you clicked on the Dairy category, the application created a new HTTPService and loaded XML data for this category. The data was then passed to the repeater’s dataProvider property, which created an instance of the ImageDisplay for each product in the category.

The Cumulative Instances column shows the total number of times this class has been instantiated since the application started. The Instances column shows the number of instances that are still in memory at this time. The difference between the Cumulative and Instances column is the number of instances that have been garbage collected at some point.

7 Click through each of the other categories in the application to display the products contained within them. Switch back to the Flex Profiler and view the instance information for the ImageDisplay class. The ImageDisplay class will now show 18 cumulative and current instances. This indicates that none of these instances have been garbage collected yet. This could indicate a memory leak.

8 Directly above the column named Memory in the Live Objects grid, there are a series of icons arranged horizontally. The first of these icons causes the Garbage Collector to execute immediately. Click this icon now.



As mentioned in the earlier section, garbage collection runs automatically during allocation; however, it is difficult for the developer to understand precisely when garbage collection last ran. The Flex Profiler gives you the ability to run garbage collection as needed.

9 Review the cumulative and current instances for the ImageDisplay class again.

The number of instances is now 18. As you just forcibly ran garbage collection, and there are only three ImageDisplay instances displayed on the screen currently, it now seems certain that there is a problem. ImageDisplay instances that are no longer used are not being garbage collected. As you know from the earlier sections of this lesson, the only thing that would prevent garbage collection is a remaining reference to these ImageDisplay instances.

10 Click the icon immediately to the right of the garbage collection icon to take a memory snapshot.



A memory snapshot saves the current state of the memory at the moment you click the snapshot button. The snapshot does not update the Live Object view, but allows you to analyze the memory in a much deeper way.

11 Double-click the words Memory Snapshot underneath your running application in the upper-left corner of the window.

After analyzing the data, a new tab opens next to the Live Object tab with the snapshot information. It is possible to take multiple snapshots and even save this data for review as you attempt to resolve problems within your application. The following figure shows the results of a new memory snapshot.

Note: When you a take a memory snapshot, the Flex Profiler implicitly runs garbage collection first. Clicking the memory snapshot icon is the same as clicking Run garbage collection and then Memory Snapshot.

12 Inside the Memory Snapshot tab, double-click the ImageDisplay class.

You see 18 separate listings for each of the ImageDisplay objects in memory when this snapshot was taken, each with a number in parentheses. The number in parentheses is the total number of references to the current object.

13 Click the first component:ImageDisplay label.

The right side of the screen shows the Allocation trace. This information shows where in the program flow this object was first created. In this case, you see that this particular object was created in a method in Container.as, which was called from Repeater.as, which was called from ProfilerTest.mxml. The line number of each of these calls is also recorded.

At this point, you know that the object was created because of the Repeater call, which is correct, but you do not know which other object has a reference that is preventing this object from being garbage collected.

14 Click the tree open indicator next to the component:ImageDisplay label.

This causes the tree to expand and show all objects in the system that contain references to the current object and the property name within that object that holds the reference. This list can be extensive. As we discussed, there are many circular references between parent and child that are not factors during the mark and sweep phase of garbage collection; so, we are looking for items here that could still be a factor.

At this point, we will make an assumption. Although there may be memory leaks in the code written and provided by Adobe, it is unlikely that you will be able to do much about those. The memory leak you are seeing involves objects written in your code. Therefore, to limit the scope of information we need to search, we are going to focus on things outside of the Adobe-provided Flex framework. In other words, you will ignore any objects that exist in the mx.* path.

15 You will be focusing your search for references on the remaining items. Open each of the subitems labeled Function, and examine the children of these references.

Most of the children will say components:ImageDisplay. These references exist mainly as a result of data binding; however, these are not of particular interest as we know the Garbage Collector can handle circular references. You should also quickly find a listing for managers:UpdateManager and a property of [listener0]. This one is important.

16 Examine several of the other ImageDisplay class instances.

Each will show a similar result with a reference from UpdateManager.

17 Terminate this profiling session by either choosing it in the upper-left corner of the screen and clicking the Stop button or simply closing your web browser.

18 We do not intend to save the results; so once this session is terminated, click the red X to remove the session information.

At this point you know that the UpdateManager has a reference to each of the ImageDisplay classes. The profiler also gave you the clue that this reference was due to an event listener. Using this information, you should be able to quickly find the issue.

Fixing the ImageDisplay Class

In this exercise, you will fix the memory leak identified in the previous exercise by modifying the event listener to use weak references.

Switch back to the Flex Development perspective in Flex Builder.

1 Open the ImageDisplay.mxml class.

2 Find the code that adds an event listener to the UpdateManager instance. It is on line 17. If you review the remainder of the code in this class, you will note that there is no removeEventListener() call. As was noted earlier, ideally the number of addEventListener() calls should match the number of removeEventListener() calls. In this case, we have limited control and understanding of when our class is no longer needed, so we are going to opt for making the addEventListener() call use weak references.

3 Change the code that adds the event listener to use weak references. The new line of code should read as follows:

updateManager.addEventListener(‘toggleViewOnly’,
handleViewOnlyChanged, false, 0, true);

The reference in the UpdateManager instance created for each ImageDisplay will no longer count during garbage collection.

4 Save ImageDisplay.as.

5 Profile your application again using the same setting as before.

6 Once the application has launched, click each of the product categories to see all of the products.

7 Return to Flex Builder and click the Run Garbage Collector icon. The Live Objects view should now show 18 cumulative instances but only three current instances, meaning the other 15 have been garbage collected and this memory leak has been fixed.

This section merely touched upon the power of the memory Profiler. For more information, read “Using the Profiler” in the Flex Builder 3 documentation provided by Adobe.

Performance Profiling a Flex Application

Performance profiling is used to find aspects of your application that are not responsive or where performance can be improved. When profiling for performance, you are generally looking for methods that are executed very frequently or methods that take a long period of time each time they are executed. The combination of those two factors usually provides a good indication of where your time should be spent optimizing or potentially refactoring.

In this exercise, you will use the same poorly designed sample project. Although you have already fixed the major memory issue, the performance issues remain. Using the Flex Builder Profiler, you will identify one of the slowest portions of the application and optimize it. You will then verify the results with the Profiler.

Profiling the ProfilerTest Application

In this exercise, you will use the performance profiling capabilities of the Flex Profiler to identify the methods and objects responsible for the slow response of the ProfilerTest application. You will capture a performance profile and review it to identify methods taking a disproportionate amount of time to execute.

1 Click the Profile Application button (immediately to the right of the Debug button). The application begins launching, but focus will then be given back to the Flex Builder window and a Configure Profiler window will appear.

2 Ensure that only “Enable performance profiling” is selected.

3 Click Resume and the Eclipse perspective changes to Flex Profiling.

The Profiling perspective when only capturing performance metrics is rather boring. Nothing will actually happen here until we are ready to dive into performance profiles.

4 Select the running application, and click the icon that looks like an eraser. This resets the performance statistics.

In this case, we are not trying to gauge start-up time, so we are resetting our performance statistics after the application has started but before we interact with it.

5 Switch to your web browser and navigate through each of the six product categories.

Be sure to wait for the previous category to load before clicking on the next.

6 Switch back to the Flex Profiler and select the running application.

7 Click the icon with a clock and a pair of glasses to capture a performance profile.

A performance profile will appear under the running application, much as the memory profile did in the previous section.

8 Click the red stop icon to stop profiling the running application, then close your web browser.

9 Double-click the performance profile to open the Performance Profile view.

The Performance Profile view shows the method and package along with other crucial information.

• Calls: The number of calls to this method during the capture

• Cumulative time: The cumulative time spent in the calls to this method and any subsequent methods called within this method

• Self Time: The cumulative time spent in this method, but not subsequent method calls within this method

• Avg. Cumulative and Avg. Self: The averages of each of the previous time types

Note: Within the Methods column, there is a lot of additional information, including many items in square brackets. We can’t dive into the level of detail here to address each of these, so for additional information read the section entitled “About Profiling” in the Adobe help documentation. 10 Click the Cumulative Time column to sort from longest to shortest.

The top three items are the completeHandler for the HTTP Response, the handleDataResult method of ProfilerTest and the ImageDisplay’s initialize method. However, the Self Time for each of these methods is almost nonexistent. The returned data from the server causes the application to create a new instance of the ImageDisplay class, which is far from optimized. So, it would seem that creating those ImageDisplay classes is where all of your performance loss occurs.

Fixing the ProfilerTest Class

In this exercise, you will address the source of the largest performance issue identified in the last exercise, creation of ImageDisplay instances. You will use a property of the Repeater class to limit object recreation and significantly increase the responsiveness of the application.

1 Switch back to the Flex Development perspective in Flex Builder.

2 Open the ProfilerTest.mxml class.

3 Find the repeater in the application on line 65.

4 Repeaters have a property called recycleChildren.Set it to true. When set to true, the repeater reuses the children it already created instead of creating new ones. As you saw in the previous example, right now you create three new children every time you click a category. Reusing those children will save a significant amount of time.

5 Save the ProfilerTest.mxml file, and reprofile your application, using the steps in the previous exercise.

You will see a significant reduction in time for these methods and an increase in performance.

Ultimately, performance profiling is about optimizing the items that cost the most amount of time. It is an iterative process that continues until the application performs as required.

The ProfilerTest application can be optimized significantly further. Right now, it is extremely slow laying out and organizing its children, and lacks any intelligence when reloading data that has already been loaded once. Continuing to optimize an application like this is a great exercise to learn these tools.

What You Have Learned

In this lesson, you have:

• Learned about memory allocation and garbage collection (pages 632-639)

• Profiled a Flex application for memory and performance (pages 639-641)

• Identified a memory leaks within the application (pages 642-648)

• Identified a performance problem (pages 648-651)

Read more from Michael Labriola.

• comments: 7
• tags:
• excerpt
• flex
• profiler

Related Entries

• Adobe PDF Navigator developer contest
• Flash Next - Part 3
• My Experience Speaking At FFK 2010
• RIA Radio Episode 14: litl and Flash and the City
• Moving your Flex Components from MXML to ActionScript 3