Improve slow function executions

After recording a timeline in the Timelines tab, select JavaScript & Events in the sidebar.

The Details section lists the following events:

• for Script Evaluations, like eval or appending a script tag

• for requestAnimationFrame requests or firings

• for timer install / fire

• for DOM events, Promise reactions, and all other events.

In the Details section, do any of the following:

• Click the jump button after a source location to jump straight to the function's definition.

• Control-click a specific function and choose Charge to Callers in the shortcut menu to ignore certain functions and instead accrue their execution time to callers in Top Down mode. If you want to focus on a specific subtree of the entire call tree, you can Control-click a node and choose Focus On Subtree. This hides all other call tree items and recalculates Total Time percentages relative to the subtree shown. This is useful to focus on just a specific code path or interaction that you want to optimize.

• Press the Clear Focus 'X' button to the left of Inverted button to cancel a Focus On Subtree command.

Click the pop-up menu above the Name column and a choose a view: Events or Call Trees.

The Events detail view shows top-level events that caused JavaScript to execute.

The Call Trees detail view provides a traditional profiler call tree interface designed to help optimize the performance of JavaScript code. It provides different ways to analyze these call stacks in aggregate to help you understand hot spots in your code. Some events that trigger JavaScript have source locations or call stacks associated with them, which are shown in the Location column. Events that cause JavaScript code to execute for a significant amount of time have an expandable call tree attached.

In Call Trees view, the default view is Top Down, which you can use to look through the call tree to uncover functions that take a lot of time to execute. You can change to the Inverted view or the Top Functions view (next to the Filter Records field) to better see the functions that are sampled most often.

• Top Down view shows all call stacks aggregated into a tree, with later functions in the call stack having deeper nesting in the Call Trees view. In Top Down view, a parent node is the caller of its child nodes.

  In general, Top Down is useful to understand the calling patterns of your code, while Inverted is more useful for finding and optimizing functions that take a long time to execute. For each call tree node, you can see:

  • Total time (how much time this function and its callees took to execute)

  • Self time (how much time this function took to execute, exclusive of callees)

  • The function's name

  • Source location

• The Top Functions view option shows all functions as top-level items, regardless of position in the call tree. When used in conjunction with sorting by Self Time, this view lets you quickly figure out which functions are taking the most time, regardless of how they are being called.

• When the Inverted view is enabled, this order is reversed. Leaves of the call tree are shown as top-level tree elements, and child nodes represent callers.