Dealing with performance issues is initially a problem of intelligence gathering. There can be multiple reasons why an application feels slow, and the feedback of users often doesn't help. Describing a part of the app as "sticky" just isn't a great way to diagnose the root cause. We need to get firm facts and figures in front of us before we can hope to find a solution. While we'll look at metrics such as rendering and response times, there are many considerations that must be taken into account, such as memory usage and user perception. These topics are left as an exercise for the reader.

The Chrome Developer Tools come to the rescue again. This time, we'll look at two main features that help diagnose performance problems: profiles and the timeline.

The profiler can be found by bringing up the Developer Tools and selecting the Profiles tab:

While there are several types of profiles that can be issued, we'll take a look at the CPU profile. In the preceding screenshot, we'd click on Start to immediately begin profiling. Here's a look at what happens when you click on a product in Alcohology:

The grid is ordered with the most time-consuming function calls at the top and each line can be expanded so that we can see the functions that were called in turn. The Self column shows the percentage of time spent in just that function's body; the Total column shows the time spent in that function as well as all of the functions it called.

While this part of the Alcohology application is performing just fine, this simple view of the heavily-used parts of code is a key avenue to diagnose serious performance problems. However, we can do more.

We've used Chrome Developer Tools to evaluate the performance of remote requests and now we've used them to track down hotspots in our code. What about a single view that could help us track the general behavior of our application and help us visualize the types of interactions that are slowing things down? This is exactly what the Timeline tab offers.

By selecting the Timeline tab and clicking on the Record button, Chrome immediately begins recording every event currently taking place on the page. Clicking on Record again allows you to analyze the results:

Timeline allows you to filter down a timeframe of events and view each in turn, from user clicks to Ajax requests to URL changes and browser repaints. From the first event, we can trace down each subsequent event, viewing stack traces, detailed timings and warnings regarding problematic behavior.

Timeline is a powerful tool and you will need time and experience to use it to the fullest. It's time well spent; it can reveal clues that would be difficult or impossible to discover any other way. These clues can help resolve problems that would otherwise take days to tackle.