src/cm/media/js/lib/yui/yui_3.0.0b1/examples/profiler/profiler-simple-example.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>YUI Library Examples: Profiler: Simple Profiling Example</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="../../assets/yui.css" >
<style>
/*Supplemental CSS for the YUI distribution*/
#custom-doc { width: 95%; min-width: 950px; }
#pagetitle {background-image: url(../../assets/bg_hd.gif);}
/* #pagetitle h1 {background-image: url(../../assets/title_h_bg.gif);}*/
</style>
<link rel="stylesheet" type="text/css" href="../../assets/dpSyntaxHighlighter.css">
<!--there is no custom header content for this example-->
<link type="text/css" rel="stylesheet" href="../../build/cssfonts/fonts-min.css" />
<script type="text/javascript" src="../../build/yui/yui-debug.js"></script>
</head>
<body id="yahoo-com" class=" yui-skin-sam">
<div id="custom-doc" class="yui-t2">
<div id="hd">
<div id="ygunav">
<p>
<em>
<a href="http://developer.yahoo.com/yui/3/">YUI 3.x Home</a> <i> - </i>
</em>
</p>
<form action="http://search.yahoo.com/search" id="sitesearchform">
<input name="vs" type="hidden" value="developer.yahoo.com">
<input name="vs" type="hidden" value="yuiblog.com">
<div id="sitesearch">
<label for="searchinput">Site Search (YDN & YUIBlog): </label>
<input type="text" id="searchinput" name="p">
<input type="submit" value="Search" id="searchsubmit" class="ygbt">
</div>
</form>
</div>
<div id="ygma"><a href="../../"><img src="../../assets/logo.gif" border="0" width="200" height="93"></a></div>
<div id="pagetitle"><h1>YUI Library Examples: Profiler: Simple Profiling Example</h1></div>
</div>
<div id="bd">
<div id="bar-note"><p><strong>Note:</strong> This is YUI 3.x. Looking for <a href="http://developer.yahoo.com/yui/">YUI 2.x</a>?</p></div>
<div id="yui-main">
<div class="yui-b">
<div class="yui-ge">
<div class="yui-u first example" id="main">
<h2>Profiler: Simple Profiling Example</h2>
<div id="example" class="promo">
<p>
<p>This example shows basic usage of the Profiler for profiling a single function. A single function is
profiled and all of the information displayed.</p> </p>
<div class="module example-container ">
<div id="example-canvas" class="bd">
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
<script type="text/javascript">
YUI({base:"../../build/", timeout: 10000, filter:"debug", logInclude: {profiler:true, example:true}}).use("event", "profiler",function (Y) {
Y.namespace("example.profiler");
//object with method to profile
Y.example.profiler.MathHelper = {
factorial : function (num){
if (num > 1) {
return num * Y.example.profiler.MathHelper.factorial(num-1);
} else {
return 1;
}
}
};
//register the function
Y.Profiler.registerFunction("Y.example.profiler.MathHelper.factorial", Y.example.profiler.MathHelper);
window.onload = function (){
Y.example.profiler.MathHelper.factorial(10);
var calls = Y.Profiler.getCallCount("Y.example.profiler.MathHelper.factorial");
var max = Y.Profiler.getMax("Y.example.profiler.MathHelper.factorial");
var min = Y.Profiler.getMin("Y.example.profiler.MathHelper.factorial");
var avg = Y.Profiler.getAverage("Y.example.profiler.MathHelper.factorial");
Y.Profiler.unregisterFunction("Y.example.profiler.MathHelper.factorial");
var msg = "Method Y.example.profiler.MathHelper was run " + calls + "times.\n" +
"The average time was " + avg + "ms.\n" +
"The max time was " + max + " ms.\n" +
"The min time was " + min + " ms.";
alert(msg);
};
});
</script>
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
</div>
</div>
</div>
<h2 class="first">Simple Profiling Example</h2>
<p>This example begins by creating a namespace:</p>
<textarea name="code" class="JScript" cols="60" rows="1">
Y.namespace("example.profiler");
</textarea>
<p>This namespace serves as the core object upon which others will be added (to prevent creating global objects).</p>
<p>Next, an object is created with a method:</p>
<textarea name="code" class="JScript" cols="60" rows="1">
//object with method to profile
Y.example.profiler.MathHelper = {
factorial : function (num){
if (num > 1) {
return num * MathHelper.factorial(num-1);
} else {
return 1;
}
}
};
</textarea>
<p>This object, <code>MathHelper</code> contains a single method called <code>factorial()</code> that computes the
factorial of a given number. Any time <code>factorial()</code> is called, the argument indicates how many times
the function will be recursively called. For example, <code>factorial(10)</code> results in the funtion being
called 10 times. This makes it an ideal test case for profiling because the results are so predictable.</p>
<h3>Registering the function</h3>
<p>The most important step to profile this function is to call <code>registerFunction()</code> with the fully-qualified
function name, which is <code>Y.example.profiler.MathHelper</code>, and the object:</p>
<textarea name="code" class="JScript" cols="60" rows="1">
Y.Profiler.registerFunction("Y.example.profiler.MathHelper.factorial", Y.example.profiler.MathHelper);
</textarea>
<p>Since this function is not fully accessible in the global scope, the owner object must be passed in
as the second argument.</p>
<h3>Running the example</h3>
<p>With everything setup, the last step is to run the code. This initialization is assigned to take place when the window has been
completely loaded by using the <code>window.onload</code> event handler:</p>
<textarea name="code" class="JScript" cols="60" rows="1">
window.onload = function (){
Y.example.profiler.MathHelper.factorial(10);
var calls = Y.Profiler.getCallCount("Y.example.profiler.MathHelper.factorial");
var max = Y.Profiler.getMax("Y.example.profiler.MathHelper.factorial");
var min = Y.Profiler.getMin("Y.example.profiler.MathHelper.factorial");
var avg = Y.Profiler.getAverage("Y.example.profiler.MathHelper.factorial");
Y.Profiler.unregisterFunction("Y.example.profiler.MathHelper.factorial");
var msg = "Method Y.example.profiler.MathHelper was run " + calls + "times.\n" +
"The average time was " + avg + "ms.\n" +
"The max time was " + max + " ms.\n" +
"The min time was " + min + " ms.";
alert(msg);
};
</textarea>
<p>The code block begins by calling <code>factorial()</code> once, which gets profiled. Then, the information
about the function can be retrieved from the Profiler. This information is output into the Logger on the page,
displaying the number of times that the function was called along with the minimum, maximum, and average
running times. Since this is a very simple function, the run times will most likely be 0ms on most machines.</p> </div>
<div class="yui-u sidebar">
<div id="examples" class="mod box4">
<div class="hd">
<h4>
Profiler Examples:</h4>
</div>
<div class="bd">
<ul>
<li class='selected'><a href='../profiler/profiler-simple-example.html'>Simple Profiling Example</a></li><li><a href='../profiler/profiler-object-example.html'>Object Profiling Example</a></li> </ul>
</div>
</div>
<div class="mod box4">
<div class="hd">
<h4>More Profiler Resources:</h4>
</div>
<div class="bd">
<ul>
<!-- <li><a href="http://developer.yahoo.com/yui/profiler/">User's Guide</a> (external)</li> -->
<li><a href="../../api/module_profiler.html">API Documentation</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="yui-b toc3" id="tocWrapper">
<!-- TABLE OF CONTENTS -->
<div id="toc">
<ul>
<li class="sect first">YUI 3.x Project</li><li class="item"><a title="The Yahoo! User Interface (YUI) Library, 3.x Branch, " href="http://developer.yahoo.com/yui/3/">YUI 3 Web Site (external)</a></li><li class="item"><a title="Examples of every YUI utility and control in action" href="../../examples/">YUI 3 Examples</a></li><li class="item"><a title="Instantly searchable API documentation for the entire YUI library." href="../../api/">YUI 3 API Docs</a></li><li class="item"><a title="The YUI Library can be downloaded from SourceForge" href="http://sourceforge.net/projects/yui/">YUI 3 on Sourceforge (external)</a></li><li class="item"><a title="YUI is free and open, offered under a BSD license." href="http://developer.yahoo.com/yui/3/license.html">YUI License (external)</a></li><li class="sect">YUI 3 Core - Examples</li><li class="item"><a title="YUI (Global Prerequisite) - Functional Examples" href="../../examples/yui/index.html">YUI (Global Prerequisite)</a></li><li class="item"><a title="Event - Functional Examples" href="../../examples/event/index.html">Event</a></li><li class="item"><a title="Node - Functional Examples" href="../../examples/node/index.html">Node</a></li><li class="sect">YUI 3 Component Infrastructure - Examples</li><li class="item"><a title="Attribute - Functional Examples" href="../../examples/attribute/index.html">Attribute</a></li><li class="item"><a title="Plugin - Functional Examples" href="../../examples/plugin/index.html">Plugin</a></li><li class="item"><a title="Widget - Functional Examples" href="../../examples/widget/index.html">Widget</a></li><li class="sect">YUI 3 Utilities - Examples</li><li class="item"><a title="Animation - Functional Examples" href="../../examples/anim/index.html">Animation</a></li><li class="item"><a title="Cache - Functional Examples" href="../../examples/cache/index.html">Cache</a></li><li class="item"><a title="Cookie - Functional Examples" href="../../examples/cookie/index.html">Cookie</a></li><li class="item"><a title="DataSchema - Functional Examples" href="../../examples/dataschema/index.html">DataSchema</a></li><li class="item"><a title="DataSource - Functional Examples" href="../../examples/datasource/index.html">DataSource</a></li><li class="item"><a title="DataType - Functional Examples" href="../../examples/datatype/index.html">DataType</a></li><li class="item"><a title="Drag & Drop - Functional Examples" href="../../examples/dd/index.html">Drag & Drop</a></li><li class="item"><a title="Get - Functional Examples" href="../../examples/get/index.html">Get</a></li><li class="item"><a title="History - Functional Examples" href="../../examples/history/index.html">History</a></li><li class="item"><a title="ImageLoader - Functional Examples" href="../../examples/imageloader/index.html">ImageLoader</a></li><li class="item"><a title="IO - Functional Examples" href="../../examples/io/index.html">IO</a></li><li class="item"><a title="JSON (JavaScript Object Notation) - Functional Examples" href="../../examples/json/index.html">JSON</a></li><li class="item"><a title="Queue - Functional Examples" href="../../examples/queue/index.html">Queue</a></li><li class="item"><a title="Stylesheet - Functional Examples" href="../../examples/stylesheet/index.html">Stylesheet</a></li><li class="sect">YUI 3 Widgets - Examples</li><li class="item"><a title="Overlay - Functional Examples" href="../../examples/overlay/index.html">Overlay</a></li><li class="item"><a title="Slider - Functional Examples" href="../../examples/slider/index.html">Slider</a></li><li class="sect">YUI 3 Node Plugins - Examples</li><li class="item"><a title="FocusManager Node Plugin - Functional Examples" href="../../examples/node-focusmanager/index.html">FocusManager Node Plugin</a></li><li class="item"><a title="MenuNav Node Plugin - Functional Examples" href="../../examples/node-menunav/index.html">MenuNav Node Plugin</a></li><li class="sect">YUI 3 CSS - Examples</li><li class="item"><a title="YUI CSS Reset - Functional Examples" href="../../examples/cssreset/index.html">CSS Reset</a></li><li class="item"><a title="YUI Fonts - Functional Examples" href="../../examples/cssfonts/index.html">CSS Fonts</a></li><li class="item"><a title="YUI Base - Functional Examples" href="../../examples/cssbase/index.html">CSS Base</a></li><li class="sect">YUI 3 Developer Tools - Examples</li><li class="item"><a title="Console - Functional Examples" href="../../examples/console/index.html">Console</a></li><li class="selected "><a title="Profiler - Functional Examples" href="../../examples/profiler/index.html">Profiler</a></li><li class="item"><a title="Test - Functional Examples" href="../../examples/test/index.html">Test</a></li><li class="sect">The YUI Community</li><li class="item"><a title="The Yahoo! User Interface Blog" href="http://yuiblog.com">YUI Blog (external)</a></li><li class="item"><a title="The Yahoo! Group YDN-JavaScript hosts the YUI community forum" href="http://tech.groups.yahoo.com/group/ydn-javascript/">YUI Forum (external)</a></li><li class="item"><a title="The Yahoo! Group yui3 is dedicated to the 3.x branch of the Yahoo! User Interface (YUI) Library." href="http://tech.groups.yahoo.com/group/yui3/">YUI 3 Forum (external)</a></li><li class="item"><a title="YUI is used by Yahoo! and by hundreds of other sites, including many you know and love." href="/yui/poweredby/">YUI Sightings (external)</a></li><li class="item"><a title="Videos and podcasts from the YUI Team and from the Yahoo! frontend engineering community." href="http://developer.yahoo.com/yui/theater/">YUI Theater (external)</a></li><li class="sect">YUI Articles on the YUI Website</li><li class="item"><a title="Answers to Frequently Asked Questions about the YUI Library" href="http://developer.yahoo.com/yui/articles/faq/">YUI FAQ (external)</a></li><li class="item"><a title="Yahoo!'s philosophy of Graded Browser Support" href="http://developer.yahoo.com/yui/articles/gbs/">Graded Browser Support (external)</a></li><li class="item"><a title="Reporting Bugs and Making Feature Requests for YUI Components" href="http://developer.yahoo.com/yui/articles/reportingbugs/">Bug Reports/Feature Requests (external)</a></li><li class="item"><a title="Serve YUI source files from Yahoo! -- free, fast, and simple" href="http://developer.yahoo.com/yui/3/articles/hosting/">Serving YUI Files from Yahoo! (external)</a></li></ul>
</div>
</div>
</div><!--closes bd-->
<div id="ft">
<p class="first">Copyright © 2009 Yahoo! Inc. All rights reserved.</p>
<p><a href="http://privacy.yahoo.com/privacy/us/devel/index.html">Privacy Policy</a> -
<a href="http://docs.yahoo.com/info/terms/">Terms of Service</a> -
<a href="http://docs.yahoo.com/info/copyright/copyright.html">Copyright Policy</a> -
<a href="http://careers.yahoo.com/">Job Openings</a></p>
</div>
</div>
<script src="../../assets/dpSyntaxHighlighter.js"></script>
<script language="javascript">
dp.SyntaxHighlighter.HighlightAll('code');
</script>
</body>
</html>