Call Tree Analysis in Performance DevTool

What is the Call Tree?

The Call Tree view in Chrome DevTools Performance panel shows the hierarchical call paths in your JavaScript code. It helps you understand:

Which functions are called and by whom
How much time is spent in each function
Where the bottlenecks are in your application
The full execution context of your code

Key Features of Call Tree:

Self Time: Time spent in the function itself (excluding calls to other functions)
Total Time: Total time including all child function calls
Aggregation: Similar call stacks are aggregated for easier analysis
Call Hierarchy: Visualizes parent-child relationships between functions

Hands-On Exercise

Open the DevTools (F12 or right-click and select "Inspect")
Go to the Performance tab
Click the Record button
Click the Run Call Tree Demo button below
After the demo completes, click Stop in DevTools
When the recording loads, scroll down to the Bottom-Up, Call Tree or Event Log sections

Analysis Tasks:

Find which function consumes the most CPU time (look for computeHeavyTask)
Identify which functions call computeHeavyTask (parent functions)
Compare "Self Time" vs "Total Time" for each function
Try switching between Call Tree and Bottom-Up views to see different perspectives

Call Tree Demo

This button triggers a series of function calls that demonstrate a multi-level call hierarchy. The demo includes CPU-intensive tasks, DOM manipulation, and data processing operations.

What to look for in the Call Tree:

Notice how runCallTreeDemo is the root of our call tree
Observe how functions like updateUI and handleUserAction are mid-level orchestrators
See how leaf functions like computeHeavyTask often consume the most actual CPU time
Look for multiple call paths to the same function (e.g., computeHeavyTask is called from multiple places)

Performance Hands-On 15 - Call Tree Analysis