This example shows using the Profiler on all methods in an object. It uses the YAHOO.util.Dom
object
as the object to be profiled.
Keep an eye on the Logger console at right to see the profiling information being reported.
To illustrate using the Profiler on objects, the YAHOO.util.Dom
object is registered for profiling. This means
that all of the methods on the object are being profiled. The two methods being called explicity are getElementsByClassName()
and addClass()
, although the Profiler will show that these methods use other methods on YAHOO.util.Dom
. To
illustrate their use, a number of demo elements are added to the markup:
1 | <div class="bar">div class="bar"</div> |
2 | <div class="bar-baz">div class="bar-baz"</div> |
3 | <div class="bar ">div class="bar "</div> |
4 | <div class=" bar ">div class=" bar "</div> |
5 | <div class="bar baz">div class=" bar baz"</div> |
6 | <div class="bar2 baz">div class=" bar2 baz"</div> |
7 | <div class="foo">div class="foo"</div> |
8 | <div class="foo" id="bar">div class="foo" id="bar"</div> |
9 | <div class="foo bar baz">div class="foo bar baz"</div> |
10 | <p class="bar">p class="bar"</p> |
11 | <button id="demo-run">run</button> |
view plain | print | ? |
The button is used to run the example. The function being called when the button is clicked is assigned using the
YUI Event Utility's on()
method:
1 | <script type="text/javascript"> |
2 | YAHOO.util.Event.on('demo-run', 'click', function(){ |
3 | YAHOO.tool.Profiler.registerObject("YAHOO.util.Dom"); |
4 | |
5 | var results = YAHOO.util.Dom.getElementsByClassName('bar'); |
6 | YAHOO.util.Dom.addClass(results, "newclass"); |
7 | |
8 | var report = YAHOO.tool.Profiler.getFullReport(function(data){ |
9 | return data.calls > 0; |
10 | }); |
11 | |
12 | YAHOO.tool.Profiler.unregisterObject("YAHOO.util.Dom"); |
13 | |
14 | //output results |
15 | for (var func in report){ |
16 | YAHOO.log(func + "(): Called " + report[func].calls + " times. Avg: " + |
17 | report[func].avg + ", Min: " + report[func].min + ", Max: " + report[func].max); |
18 | } |
19 | }); |
20 | </script> |
view plain | print | ? |
The function begins be registering YAHOO.util.Dom
with the Profiler. Note that since this object exists in the
global scope, only one argument is necessary for registerObject()
. Then, the getElementsByClassName()
and addClass()
methods are called. After that, the full report is returned and the object is unregistered. The last
step is to output all of the information that was collected. Even though there's only two methods called explicitly in this example,
the profiled data indicates that several other methods on YAHOO.util.Dom
were called internally to accomplish the
tasks.
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.
INFO 219ms (+156) 5:00:56 AM:
LogReader instance0
LogReader initialized
INFO 63ms (+0) 5:00:56 AM:
Get
Appending node: ../../../2.x/build/event-mouseenter/event-mouseenter-min.js
INFO 63ms (+1) 5:00:56 AM:
Get
attempting to load ../../../2.x/build/event-mouseenter/event-mouseenter-min.js
INFO 62ms (+19) 5:00:56 AM:
Get
_next: q0, loaded: undefined
INFO 43ms (+43) 5:00:56 AM:
example
The example has finished loading; as you interact with it, you'll see log messages appearing here.
INFO 0ms (+0) 5:00:56 AM:
global
Logger initialized
Copyright © 2011 Yahoo! Inc. All rights reserved.
Privacy Policy - Terms of Service - Copyright Policy - Job Openings