The ProfilerViewer Control (and the Profiler that drives it) is code-agnostic: It can be used as easily to profile your own code or third-party code as it can to profile YUI modules. In this example, we use Profiler and ProfilerViewer to profile the DP Syntax Highlighter script that the YUI Project uses for code highlighting on our website.
To lighten the initial YUI footprint on the page (and minimize the impact of YUI on the script being profiled), this example takes the following steps:
Show Code Profile
Here's how we accomplish the steps outlined above. (Note: It's the script-based code-highlighting used below that's being profiled in this example.)
First, we load the minimal dependencies for profiling code with YUI Profiler. To that, we add the DP Syntax Highlighter code (ie, the code that we'll be profiling).
Next, we set up a simple initialization function that (a) sets up the code we want to profile then (b) executes the code:
At this point, we've told Profiler what parts of Syntax Highlighter we want profiled and we've then run Syntax Highlighter, capturing data about its performance. And we've done all this with the smallest possible amount of YUI code on the page. Note that Profiler is loaded now, but ProfilerViewer and all of the YUI infrastructure it leverages — like Element, DataTable and Charts — is still absent.
Now it's time to set up a button that brings in the YUI ProfilerViewer and all of its dependencies. That button executes the following code:
You can use similar strategies to leverage YUI's Profiler and ProfilerViewer on your projects — even those that aren't based on YUI.
The full script souce for this example follows: