YUI Library Home

YUI Library Examples: ProfilerViewer Control: Using the ProfilerViewer API while Profiling the YUI Menu Control

ProfilerViewer Control: Using the ProfilerViewer API while Profiling the YUI Menu Control

In this example, we explore the use of the ProfilerViewer API to customize the console slightly while taking a thorough look at the performance profile of the YUI Menu Control. Customizations include:

  1. The console launcher is reduced in size;
  2. The console is draggable via the header;
  3. The height of the table and the number of functions profiled in the chart are increased;
  4. A filter is used to show only functions that have been called at least once.

Check out the example in action via the New Window button below, then come back to this page to read the full tutorial below on how to customize your ProfilerViewer instance.

Making Use of ProfilerViewer's API

This example points to how you can use ProfilerViewer's provided API to create profiling experiences tailored to your environment.

This example has the following dependencies:

Here are some of the key features of this example:

1. Thorough profiling of the YUI Menu Control

Generally, a thorough profiling of a component like Menu requires careful thought and analysis. In this case, we want a picture of how Menu's own functions perform and also of how it makes use of other YUI components like the Dom Collection and the Event Utility. To do this, we need to profile the constructors of the main Menu classes and use Profiler's registerObject method to profile the static classes of Dom and Event.

2. Using ProfilerViewer's configuration attributes

In instantiating ProfilerViewer, we'll use configuration attributes to:

  1. Set the base directory for YUI files (so that some files can be loaded only when needed) (line 3 below);
  2. Set the path to the YUI Charts Control .swf file relative to the page being viewed (line 21 below);
  3. Filter the Profiler's output, showing in the table only functions that have been called at least once (lines 11-13 below);
  4. Set the number of functions profiled visually in the chart (line 19 below);
  5. Set the height of the console's DataTable component (line 20 below).

3. Use one of ProfilerViewer's "interesting moments" (custom events) to further customize the interaction

ProfilerViewer exposes a few custom events (like when the console first renders and when a data-refresh is requested; you can respond to these by subscribing to the events. Here, we'll use a different class of custom event: one that fires automatically in response to an attribute change.

ProfilerViewer has an attribute called visible that is toggled when the console is minimized/maximized. We'll subscribe to that event here. When the console is minimizing, we'll make it narrower (300px wide) so that it's more compact and out of the way. When visible is changed back to true (ie, when the console is maximized), we will reset the width of the console to 950px to reveal all of the profiling data.

4. Use the getHeadEl() method to provide a drag handle for the draggable console

To help keep the ProfilerViewer console out of the way, we'll make it draggable via the header bar. To do this, we need access to the ProfilerViewer's header element. ProfilerViewer's API gives you access to a number of key elements in the console's DOM; in this case, we'll use the getHeadEl() method to specify the header bar as the drag handle for the console.

Full source code

The full JavaScript source code for this example is as follows:

Configuration for This Example

You can load the necessary JavaScript and CSS for this example from Yahoo's servers. Click here to load the YUI Dependency Configurator with all of this example's dependencies preconfigured.

Copyright © 2011 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings