Visit Mozilla.org

Profiling JavaScript with Shark

From MDC

This article covers features introduced in Firefox 3

It's now possible to build a copy of Firefox that allows you to start and stop Shark profiles from JavaScript code. With this customized build, you can more easily locate performance problems in JavaScript libraries, web pages, or in Firefox itself.

Using the Shark-in-JavaScript support, you can avoid having to manually start and stop Shark, thereby taking your trigger finger out of the equation while timing operations.

Note: Remember, this feature is only available in a custom-built Firefox. It is not part of the standard build. In addition, you must install the latest version of CHUD in order to use it.

[edit] Getting started

The first step is to download and install the latest CHUD. You can't even build Firefox with Shark-in-JavaScript enabled without it. If you have any problems, download and install it. Even if you think you already have it. You might be out of date.

Once you've got CHUD installed, and have the Firefox code, you need to set up a mozconfig file that enables the --enable-shark option. It might look like this:

. $topsrcdir/browser/config/mozconfig
mk_add_options MOZ_OBJDIR=@TOPSRCDIR@/ff-opt-libxul
ac_add_options --enable-optimize
ac_add_options --enable-libxul
ac_add_options --enable-shark
ac_add_options --enable-debugger-info-modules
Note: This mozconfig file works on Intel Macintosh systems with Leopard but may not work on PowerPC and Tiger, due to libraries being moved around.

Then build Firefox as usual.

[edit] Using Shark-in-JavaScript

Once you have a build, you have access to four new global functions that let you control Shark:

connectShark()
Connects to Shark.
startShark()
Starts profiling.
stopShark()
Stops profiling.
disconnectShark()
Disconnects from Shark.

Usually you will call these in exactly that order, like this:

<script>
connectShark();
startShark();

...
doSomethingReallySlow();
...

stopShark();
disconnectShark();
</script>

For a simple sample of how this works, see Apple's Towers of Hanoi example.

Before running your test, start the Shark utility. If the code will take less than a second or so to run, you should adjust your sample rate to 20µs. To do this, show the configuration editor:

Image:Shark-config.png

Then change the time sample interval as shown below:

Image:Shark-sample.png

To allow your JavaScript code to control Shark, you need to put Shark into remote mode by choosing the "Programmatic (Remote)" sampling mode:

Image:Shark-remote.png

Now you're ready to run your test. This will get you very clean sampling data from which to make optimization decisions.