Using the Chrome web developer tools, part 5: The CPU Profiler
invocation. When you click the button, the global function
a is invoked, which
b which in turn calls
c which makes a
call. If you open up the Chrome debugger tools, navigate to the Profiles tab and make sure
see the CPU profiler output of this very simple example.
Click the Record button in the upper left corner of the profiler tab, move the mouse up and click the button labelled "click" on the page, and then stop the recording (by pressing the record button again). You'll see the CPU profile shown in figure 2.
Here you can see that the profiler captured a little over 2 second's worth of data (2164 ms,
was idle for most of that time — that accounts for the time it took me to move my mouse
up to the button, click it, and move it back down to the
record button. The garbage collector
ran in this time period, but most of the action of interest is in the
handler. You can expand it to get more information on what it comprised by expanding the disclosure
triangles in the display as shown in figure 3.
This shows pretty much what you'd expect —
b, which calls
c and then
interesting point about the view in example 3, though, is that you get a peek inside Chrome's
internals. In fact, you can click in to the invocations and look at the implementation of
console.log as shown in figure 4.
Click back to the
Profile tab to return to the CPU Profile view. The default CPU profile view shows you the "top down" tree, where each line is a "root" —
that is, a function call that wasn't called by another. You can invert this tree by selecting
"bottom up" as shown in figure 5; in this case, each line is a "leaf" and expanding the leaves
shows you the caller of each function (so each line is not necessarily unique in this view).
This view really gives you a way to quickly determine who the real performance hogs are in your application — most of the time, the leaf nodes are the culprits, although it can also be the case that a higher-level function is calling a well-behaved function over and over again, causing a slowdown, so you should switch between the top-down and bottom-up views, sorting by time, to figure out where to focus your optimization efforts.
Most interesting is the "Chart" view, shown in figure 6.
At first, it doesn't look like there's much to see. The timeline along the top tells me that the CPU profiler recorded for 2 seconds — if you look closely, though, you'll see a very quick spike in activity around the 1 second mark. If you read my piece on the timeline tab, you should be familliar with this layout and know that you can click on an area of the timeline to zoom in on it as shown in figure 7.
Now you can see how that each call stack is illustrated in color — the colors themselves don't actually have any meaning; they just server to distinguish the calls from one another. If you hover over one of the colored function areas, you can see more details about the call as shown in figure 8.Part 6: The Memory Profiler Tab